3g 手机网站,wordpress外观自定义,wordpress对配置的要求,简洁大气的网站推荐Flutter 如果界面上有数据更新时#xff0c;目前学习到的有3种#xff1a;
第一种#xff1a; 直接用 StatefulWidget组件#xff0c;然后当数据更新时#xff0c;调用setState的方法更新数据#xff0c;页面上的数据会直接更新#xff1b;第二种#xff1a; 用 State…Flutter 如果界面上有数据更新时目前学习到的有3种
第一种 直接用 StatefulWidget组件然后当数据更新时调用setState的方法更新数据页面上的数据会直接更新第二种 用 StatefulWidget组件 和 InheritedWidget 的结合这种模式比较适用于有比较多层级的场景这样数据更新时就不用一层一层的从父类上传递数据第三种用第三方库scoped_model, 这种模式下在StatelessWidget也可以实现UI页面上数据的更新。
如要实现下面这个页面的效果点击 count:x 和底部, 实现count的数据加1
1. StatefulWidget 更新数据的使用
这个比较简单代码如下
import package:flutter/material.dart;class StatemanagerDemo extends StatefulWidget {const StatemanagerDemo({super.key});overrideStateStatemanagerDemo createState() _StatemanagerDemoState();
}class _StatemanagerDemoState extends StateStatemanagerDemo {int _count 0;void _increaseCount() {// 这个是关键只有调用 setState 才能更新页面的数据setState(() {_count 1;});}overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(StateManagerDemo),),body: CounterWidget(count: _count, increaseCount: _increaseCount),floatingActionButton: FloatingActionButton(onPressed: _increaseCount,child: Icon(Icons.add),),);}
}class CounterWidget extends StatelessWidget {final int count;final VoidCallback increaseCount;const CounterWidget({super.key, required this.count, required this.increaseCount});overrideWidget build(BuildContext context) {return Center(child: ActionChip(label: Text($count),onPressed: increaseCount));}
}2. StatefulWidget组件 和 InheritedWidget 的结合
代码如下
//-------用InheritedWidget 实现数据的更新------
class StateManagerInheriteDemo extends StatefulWidget {const StateManagerInheriteDemo({super.key});overrideStateStateManagerInheriteDemo createState() _StateManagerInheriteDemoState();
}class _StateManagerInheriteDemoState extends StateStateManagerInheriteDemo {int _count 0;void _increaseCount() {setState(() {_count 1;});}overrideWidget build(BuildContext context) {return CounterProvider(count: _count, increaseCount: _increaseCount, child: Scaffold(appBar: AppBar(title: Text(StateManagerDemo),),body: CounterWidgetInherite(),floatingActionButton: FloatingActionButton(onPressed: _increaseCount,child: Icon(Icons.add),),));}
}// 创建一个provider类来提供全局可用的数据存储和获取
class CounterProvider extends InheritedWidget {final int count;final VoidCallback increaseCount;final Widget child;const CounterProvider({super.key, required this.count, required this.increaseCount, required this.child}) : super(child: child);// 定义一个of方法可以获取CounterProvider的数据static CounterProvider? of(BuildContext context) context.dependOnInheritedWidgetOfExactTypeCounterProvider();overridebool updateShouldNotify(covariant InheritedWidget oldWidget) {return true;}
}// 模拟多个层级1
class CounterWidgetInherite extends StatelessWidget {const CounterWidgetInherite ({super.key});overrideWidget build(BuildContext context) {return Center(child: Counter(),);}
}// 模拟多个层级2
class Counter extends StatelessWidget {const Counter({super.key});overrideWidget build(BuildContext context) {final int? count CounterProvider.of(context)?.count;final VoidCallback? increaseCount CounterProvider.of(context)?.increaseCount;return ActionChip(label: Text($count),onPressed: increaseCount,);}
}3. scoped_model 的使用
scoped_model 是第三方库需要在项目中引入三方库引入三方库的方法参考这个文章其次该模式引用到的组件主要是
ScopedModelScopedModelDescendant
原理还没搞明白只是看着视频实现了功能代码如下
import package:flutter/material.dart;
import package:scoped_model/scoped_model.dart;//-------用Scoped_Model 实现数据的更新-----
class StateManagerScopteModelDemo extends StatelessWidget {const StateManagerScopteModelDemo({super.key});overrideWidget build(BuildContext context) {// 用ScopedModel 包装一下提供model属性对应的类型return ScopedModel(model: CounterModel(), child: Scaffold(appBar: AppBar(title: Text(StateManagerDemo),),body: CounterWidgetScopteModel(),// ScopedModelDescendant 的构建方法获取CounterModel对应的数据floatingActionButton: ScopedModelDescendantCounterModel(rebuildOnChange: false,builder: (context, _, model) {return FloatingActionButton(onPressed: model.increaseCount,child: Icon(Icons.add),);}),));}
}class CounterWidgetScopteModel extends StatelessWidget {const CounterWidgetScopteModel ({super.key});overrideWidget build(BuildContext context) {return Center(// ScopedModelDescendant 的构建方法获取CounterModel对应的数据child: ScopedModelDescendantCounterModel(builder: (context, _, model) {return ActionChip(label: Text(count: ${model.count}),onPressed: model.increaseCount,);}),);}
}// 创建继承于Model的业务类来存放对应的count和用到的方法
class CounterModel extends Model {int _count 0;int get count _count;void increaseCount() {_count 1;// 使用Model小部件的地方会监听Model的变化可以用notifyListeners方法重建UI notifyListeners();}
}
