Varias formas de actualización parcial de aleteo
El primero: usar GlobalKey
declarado en el componente padre
GlobalKey<_estado de tipo de objeto de actualización parcial> textKey = GlobalKey();
textKey.currentState.Método de actualización parcial ();
el segundo
Uso: StatefulBuilder
tercero
Integra StreamBuilder + StreamController FutureBuilder y StreamBuilder
El tercer tipo: proveedor (también comunicación asíncrona)
ChangeNotifier + ChangeNotifierProvider
El cuarto tipo (también comunicación asíncrona): Flutter ValueNotifier comunicación asíncrona, ValueListenableBuilder bzdww
ValueNotifier + ValueListenableBuilder
El primero: usar GlobalKey
La clave global define de forma única un elemento, lo que le permite acceder a otros objetos asociados con el elemento, como buildContext, estado, etc.
Escenario de uso: puede obtener su objeto de estado a través de key.currentState y luego llamar a su método onPressed.
//请求刷新
setState((){
});
#State<T extends StatefulWidget>
@override
Widget build(BuildContext context) {
//构建新的Widget
return new Text(_text);
}
Luego, si podemos exponer el texto nuevo devuelto (_texto) en el método de compilación, podemos implementar un widget de actualización parcial general.
Plan de IMPLEMENTACION
- La devolución de llamada de la interfaz devolverá un nuevo texto (_text); expuesto:
Implementado con la función typedef
//定义函数别名
typedef BuildWidget = Widget Function();
Pase la función alias BuildWidget como parámetro al método State.build
código completo
import 'package:flutter/material.dart';
//封装 通用局部刷新工具类
//定义函数别名
typedef BuildWidget = Widget Function();
class PartRefreshWidget extends StatefulWidget {
PartRefreshWidget(Key key, this._child): super(key: key);
BuildWidget _child;
@override
State<StatefulWidget> createState() {
return PartRefreshWidgetState(_child);
}
}
class PartRefreshWidgetState extends State<PartRefreshWidget> {
BuildWidget child;
PartRefreshWidgetState(this.child);
@override
Widget build(BuildContext context) {
return child.call();
}
void update() {
print('update');
setState(() {
});
}
}
usar:
import 'package:flutter/material.dart';
import 'PartRefreshWidget.dart';
class GlobalKeyDemo extends StatefulWidget {
@override
_GlobalKeyDemoState createState() => _GlobalKeyDemoState();
}
class _GlobalKeyDemoState extends State<GlobalKeyDemo> {
int _count = 0;
//使用1 创建GlobalKey
GlobalKey<PartRefreshWidgetState> globalKey = new GlobalKey();
@override
Widget build(BuildContext context) {
print('----------------build');
return Scaffold(
appBar: AppBar(
title: Text("inheritedWidget"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
//使用2 创建通用局部刷新widget
PartRefreshWidget(globalKey, () {
///创建需要局部刷新的widget
return Text(
'变化的：$_count',
style: TextStyle(color: Colors.green),
);
}),
Text('不变的: $_count'),
RaisedButton(
onPressed: () {
//点击
_count++;
//使用3调用刷新方法
globalKey.currentState.update();
},
),
],
),
)
);
}
}
Reimpreso: https://blog.csdn.net/jdsjlzx/article/details/123560075
El segundo: uso: StatefulBuilder
Escenario de uso:
Opción múltiple y opción única
Cuando se selecciona una sola, el resultado se puede devolver directamente seleccionando uno, por lo que la ventana emergente en la parte inferior no necesita administración de estado. Pero cuando se trata de selección múltiple, necesita saber la opción seleccionada actualmente. Cuando se hace clic en una opción, debe almacenarse. Cuando se hace clic nuevamente, esta opción debe borrarse. Al mismo tiempo, la interfaz necesita ser actualizado sincrónicamente, por lo que implica la gestión del estado.
Implementación utilizada internamente.
Se proporciona una clase en Flutter StatefulBuilder, que proporciona un buildermétodo para construir un componente con estado y proporciona un método de actualización de estado, por lo que la administración de estado se completa en él.
En este buildermétodo, en realidad es el método correspondiente setStatedel componente de estado correspondiente , y este estado se usa para controlar el estado del componente generado. Este método es algo similar al uso de la función de ganchosetStateStatefulBuilderReactuseState
El código central utilizado:
class DemoStatefulBuilderPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
//状态构建器
body: buildStatefulBuilder(),
);
}
} int _count = 0;
StatefulBuilder buildStatefulBuilder() {
return StatefulBuilder(
//构建状态改变的Widget
builder: (BuildContext context, void Function(void Function()) setState) {
//居中
return Center(
//手势识别
child: GestureDetector(
child: Text("早起的年轻人 $_count"),
//单击事件
onTap: () {
//刷新当前 StatefulBuilder 中的状态
setState(() {
_count++;
});
},
),
);
},
);
}El tercero usa FutureBuilder y StreamBuilder
Escenario de uso: Actualización asíncrona de la interfaz de usuario
Muchas veces confiamos en algunos datos asíncronos para actualizar dinámicamente la interfaz de usuario. Por ejemplo, al abrir una página, primero necesitamos obtener datos de Internet y mostrar un cuadro de carga durante el proceso de adquisición de datos. Cuando se obtienen los datos Representemos la página nuevamente; otro ejemplo es que queremos mostrar el progreso de Stream (como flujo de archivos, flujo de recepción de datos de Internet). Por supuesto, podemos realizar completamente las funciones anteriores con StatefulWidget. Sin embargo, dado que es muy común confiar en datos asincrónicos para actualizar la interfaz de usuario en el desarrollo real, y cuando el árbol de control en StatefulWidget es grande, la actualización de una propiedad hará que todo el árbol se reconstruya y consuma rendimiento, por lo que Flutter proporciona específicamente dos componentes, FutureBuilder y SteamBuilder Para realizar rápidamente esta función.
Uso de FutureBuilder
const FutureBuilder({
Key key,
this.future, //获取数据的方法 获取用户异步处理获得数据的代码
this.initialData, //初始的默认数据 初始化数据加载
@required this.builder //数据快照 回调函数，暴露异步处理中的快照。这个是我们构建组件的主要组成。 主要来看一下它的构造函数：
}) : assert(builder != null),
super(key: key);class _MyHomePageState extends State<MyHomePage> {
Future<String> mockNetworkData() async {
return Future.delayed(Duration(seconds: 2), () => "我是从互联网上获取的数据");
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
FutureBuilder(
future: mockNetworkData(),
builder: (BuildContext context, AsyncSnapshot snapshot){
if(snapshot.connectionState == ConnectionState.done){
if(snapshot.hasError){
// 请求失败，显示错误
return Text("Error: ${snapshot.error}");
}else {
// 请求成功，显示数据
return Text("Contents: ${snapshot.data}");
}
}else {
return CircularProgressIndicator();
}
}),
],
),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}Uso de SteamBuilder
class _MyHomePageState extends State<MyHomePage> {
Stream<int> counter(){
return Stream.periodic(Duration(seconds: 1), (i){
return i;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
StreamBuilder(
stream: counter(),
builder: (BuildContext context, AsyncSnapshot<int> snapshot){
if(snapshot.hasError){
return Text("Error: ${snapshot.error}");
}
switch (snapshot.connectionState){
case ConnectionState.none:
return Text("没有Stream");
case ConnectionState.waiting:
return Text("等待数据、、、");
case ConnectionState.active:
return Text("active: ${snapshot.data}");
case ConnectionState.done:
return Text("Stream已关闭");
}
return null;
}),
],
),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}Uso detallado de StreamBuilder y StreamController: https://blog.csdn.net/u010194271/article/details/128024208