Flutter 상태 관리의 실현
전체 app 의 상태 에서 사용자 가 app 을 사용 하 는 것 이 로그 인 상태 입 니까?아니면 관광객 상태 입 니까?한 단추 가 작 을 때 까지 단 추 를 누 르 면 선택 한 상태 인지 누 르 지 않 은 상태 인지 등 이 상태 관리 입 니 다.
2.명령 식 프로 그래 밍 과 성명 식 프로 그래 밍 상태 관리의 차이
iOS 는 상 태 를 어떻게 관리 합 니까?일반적으로 이 컨트롤 을 가 져 온 다음 에 원 하 는 상 태 를 설정 합 니 다.Flutter 응용 상태 가 바 뀌 었 을 때(예 를 들 어 사용자 가 설정 인터페이스 에서 스위치 옵션 을 클릭 했 을 때)상 태 를 바 꾸 었 습 니 다.이것 은 사용자 인터페이스의 재 그림 을 촉발 합 니 다.사용자 인터페이스 자 체 를 바 꾸 는 것 은 필요 하지 않 습 니 다(예 를 들 어 widget.setText)-상 태 를 바 꾸 면 사용자 인터페이스 가 다시 구 축 됩 니 다.
3.상태 관리 중의 성명 식 프로 그래 밍 사고
Flutter 응용 은 성명 식 입 니 다.이것 은 Flutter 가 구축 한 사용자 인터페이스 가 바로 응용 현재 상태 임 을 의미 합 니 다.
화면 상태 가 바 뀌 면 화면 을 다시 그립 니 다.iOS 의 OC 언어 처럼 상 태 를 바 꿔 야 할 컨트롤 을 가 져 오 는 것 이 아니 라 원 하 는 화면 을 그립 니 다.
4.짧 은 시간(ephemeral)과 응용(app)상태의 차이
Flutter 의 상태 관 리 는 짧 은 시간 상태 와 응용 상태 로 나 뉜 다.
짧 은 시간 상 태 는 한 페이지 에서 유지 해 야 할 상태 입 니 다.예 를 들 어 페이지 데이터 가 몇 페이지 에 불 러 왔 는 지,관심 버튼 이 관심 이 있 는 지,관심 이 없 는 지 등 은 모두 한 페이지 에서 유지 해 야 할 상태 입 니 다.widget 트 리 의 다른 부분 은 이 상태 에 접근 할 필요 가 없습니다.이런 상 태 를 서열 화 할 필 요 는 없다.이런 상 태 는 복잡 한 방식 으로 바 뀌 지 않 는 다.다시 말 하면 상태 관리 구조(예 를 들 어 ScopedModel,Redux)를 사용 하여 이런 상 태 를 관리 할 필요 가 없다.당신 이 필요 로 하 는 것 은 단지 Stateful Widget 입 니 다.
아래 에서 아래 탐색 표시 줄 에서 현재 선 택 된 항목 이 어떻게 저장 되 는 지 볼 수 있 습 니 다MyHomepage State 류 의index 변수 중.이 예 에서index 는 짧 은 시간 상태 입 니 다.
class MyHomepage extends StatefulWidget {
@override
_MyHomepageState createState() => _MyHomepageState();
}
class _MyHomepageState extends State<MyHomepage> {
int _index = 0;
@override
Widget build(BuildContext context) {
return BottomNavigationBar(
currentIndex: _index,
onTap: (newIndex) {
setState(() {
_index = newIndex;
});
},
// ... items ...
);
}
}응용 상태 입 니 다.응용 프로그램의 여러 부분 에서 짧 지 않 은 상 태 를 공유 하고 사용자 세 션 기간 에 이 상 태 를 유지 하려 면 응용 상태 라 고 부 릅 니 다.응용 상태의 예:
1.사용자 옵션
2.로그 인 정보
3.소 셜 네트워크 서비스 에서 의 알림
4.전자상거래 애플 리 케 이 션 의 카 트
5.뉴스 애플 리 케 이 션 의 글 읽 기/읽 지 않 은 상태
5.공유 상태 관리
Flutter 에 서 는 일반적으로 저장 상태의 대상 을 widget 트 리 에 대응 하 는 widget 의 상층 부 에 두 고 변 경 될 때 해당 하 는 widget 은 상층 부 에서 재 구성 합 니 다.이 메커니즘 때문에 widget 은 생명주기 문 제 를 고려 할 필요 가 없습니다.상부 에 저 장 된 데이터 의 대상 성명 에 필요 한 내용 만 표시 하면 됩 니 다.내용 이 바 뀌 면 오래된 widget 이 사라 지고 새로운 widget 으로 대 체 됩 니 다.Flutter 원생 은 공유 상 태 를 관리 하 는 두 가지 방법 을 제공 합 니 다.
5.1 --InheritedWidget
class ADCounterWidget extends InheritedWidget {
// 1.
final int counter;
// 2.
ADCounterWidget({this.counter, Widget child}): super(child: child);
// 3. Widget InheritedWidget
static ADCounterWidget of(BuildContext context) {
// Element , ADCounterElement, Element Widget
return context.dependOnInheritedWidgetOfExactType();
}
// 4. State didChangeDependencies
@override
bool updateShouldNotify(ADCounterWidget oldWidget) {
return oldWidget.counter != counter;
}
}updateShouldNotify 방법 은 신 구 HYDataWidget 을 비교 하 는 것 입 니 다.업데이트 에 의존 하 는 Widget 이 필요 합 니까?
class HYHomePage extends StatefulWidget {
@override
_HYHomePageState createState() => _HYHomePageState();
}
class _HYHomePageState extends State<HYHomePage> {
int data = 100;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("InheritedWidget"),
),
body: HYDataWidget(
counter: data,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
HYShowData()
],
),
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
setState(() {
data++;
});
},
),
);
}
}5.2 --Provider
Provider 라 이브 러 리 에는 세 가지 주요 용도 가 있 습 니 다.
Change Notifier:실제 데이터(상태)가 저 장 된 곳
void main() {
runApp(ChangeNotifierProvider(
create: (context) => CounterProvider(),
child: MyApp(),
));
}
class CounterProvider extends ChangeNotifier {
int _counter = 100;
intget counter {
return _counter;
}
set counter(int value) {
_counter = value;
notifyListeners();
}
}
class HYHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(" "),
),
body: Center(
child: Consumer<CounterProvider>(
builder: (ctx, counterPro, child) {
return Text(" :${counterPro.counter}", style: TextStyle(fontSize: 20, color: Colors.red),);
}
),
),
floatingActionButton: Consumer<CounterProvider>(
builder: (ctx, counterPro, child) {
return FloatingActionButton(
child: child,
onPressed: () {
counterPro.counter += 1;
},
);
},
child: Icon(Icons.add),
),
);
}
}
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(" "),
),
floatingActionButton: Consumer<CounterProvider>(
builder: (ctx, counterPro, child) {
return FloatingActionButton(
child: child,
onPressed: () {
counterPro.counter += 1;
},
);
},
child: Icon(Icons.add),
),
);
}
}이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
【Flutter】DateTime 전월의 일수를 취득한다달의 일수를 취득할 필요가 있어, 의외로 수요 있을까라고 생각했으므로 비망록 정도에 남겨 둡니다. DateTime 날짜에 0을 입력하면 전월 DateTime이 됩니다. 2021년 3월 0일 = 2021년 2월 28일...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
