제공 프로그램에서 선택기 사용하기

도움이 되는 경우:)

시작...

프레젠테이션 보기
사이트: https://web.flatteredwithflutter.com/#/
우리는 간략하게 소개할 것이다

선택기

선택기 및 공급자 사용

기사 내용:https://flatteredwithflutter.com/using-selector-in-provider/

현재 상태

우리가 현재 가지고 있는 내용을 묘사하는 것부터 시작합시다.이 프레젠테이션에서는 세 개의 필드가 있는 입력 양식이 있습니다.

이름 필드

나이 필드

이메일 필드

공급업체에서 선택기 사용
각 입력 필드의 값을 기본적으로 표시하는 3개의 텍스트 필드가 있습니다.

방법 1 (나는 계속 하고 있다)

공급업체에서 선택기 사용
이런 방법에 근거하여 우리는 하나가 있을 것이다

ChangeNotifierProvider는 작은 트리 위에 있습니다.

그리고 소비자, 우리가 표를 시작하기 전에

마지막으로 양식 UI

고려해야 할 사항:
폼 필드는 불필요한 생성을 진행할 것입니다.설명 좀 할게요.
예를 들어 사용자 위젯이 폼 위에 있기 때문에 나이 필드를 입력하고 있다고 가정하면 다른 필드(이름 및 전자 메일 필드)는 계속 재구성됩니다.
다른 분야에도 마찬가지다.
소비자 문서:
builder는 여러 번 호출할 수 있습니다(예를 들어 제공된 값이 변경되었을 때).
우리의 예에서 FormUI에는 세 개의 필드만 있기 때문에 우리는 approach 1을 사용할 수 있지만 복잡한 UI가 있다면 생각해 보자!

메서드 2 (제공 프로그램의 선택기 사용)

공급업체에서 선택기 사용
Flutter에서 Provider를 사용하기 시작했을 때, 대부분의 경우

ChangeNotifierProvider

Consumer, Consumer2 등

ValueListenableProvider

StreamProvider

FutureProvider

지금 우리는 선택기를 사용할 것이다.
이 방법에서는 맨 위에 ChangeNotifier Provider가 있고 UI가 있습니다.
따라서 우리 모델(ChangeNotifier 모델, UserData)에 값을 추가하기 위해
컨텍스트읽기 ()
공급업체에서 선택기 사용
Provider에 포함된 확장자입니다. 이제 모델에 입력(UserData)이 있습니다.

NotifyListeners

주의: 값의 설정은 모델에 알립니다. 왜냐하면 setter가 notifyListeners를 실현했기 때문입니다.
emailAddress(String emailAddress){_emailAddress=emailAddress;notifyListeners();} 설정
//이름과 나이가 비슷하다
마찬가지로 모든 입력 필드(이름, 나이, 이메일)에 대해 이 작업을 수행합니다.
예를 들어, 우리는 이 필드에 입력한 값을 실시간으로 표시하기를 희망한다.
프로그램의 선택기 제공

전자 메일 텍스트는 전자 메일 필드만 들어야 합니다.

이름+나이 텍스트는 이름과 나이 필드의 변경만 정탐해야 한다

양식의 모든 값을 표시하기 위해 각 필드를 들어야 합니다

전자 메일 텍스트

최종 e-메일 =
컨텍스트(모델) => 모델을 선택합니다.이메일 주소);
텍스트로 돌아가기("(e-메일 듣기) e-메일: $_Email"),
우리는 언어 환경을 사용한다.선택
문서 기반
공급자가 공개한 [T] 유형의 값을 관찰하고 변경 사항만 부분적으로 듣습니다. 
전체 대상을 감시하는 대신 [select]를 사용하면 탐지기는 selector 되돌아오는 값이 변경될 때만 재구성됩니다.
따라서 전자 메일 텍스트의 경우 전자 메일 필드만 선택하고 변경할 때 알림을 받습니다. 
이름+나이 텍스트
여기서 우리는 알림 모델의 두 필드를 듣고 싶습니다. 
새로운 패키지를 내놓을 때가 됐다tuple.
이 패키지는 우리에게 선택치 수량의 옵션을 제공하고 공급자가 추천한다.현재 7개의 값을 지원합니다.
구현 == 클래스를 작성하지 않고 여러 값을 선택하려면 tuple 의'메타그룹'을 사용하는 것이 가장 간단한 해결 방안이다
우리는 두 개의 필드가 필요하기 때문에 Tuple2를 사용한다
Tuple2 예
여기서 우리는 선택기 소부품을 사용한다
[소비자]와 마찬가지로 제한된 수량의 값을 선택하여 업데이트를 필터링하고 업데이트가 변경되지 않을 때 복구를 막을 수 있습니다.
조건: 이름 필드와 나이 필드의 Tuple2, Tuple2 .
따라서 생성기에서 다음과 같은 방법으로 값을 검색할 수 있습니다.
데이터item1//name, 메타그룹의 첫 번째 값이 String이므로
데이터item2//나이를 표시합니다. 원조의 두 번째 값은 int이기 때문입니다.
모든 텍스트
여기에서 우리는 알림 프로그램 모델의 모든 값을 들어야 한다.이것은 소비자에게 매우 좋은 용례이다.
소비자 <사용자 데이터>(
생성기: (_, 데이터, __) {
텍스트로 돌아가기 (
이름: ${data.Name}>>나이: ${data.Age}>>>이메일 ${data.emailAddress},
);
},
);
도움이 되는 경우:)

관리되는 URL: https://web.flatteredwithflutter.com/#/
Source code for Flutter Web App..