Flutter局部刷新三剑客
warning:
这篇文章距离上次修改已过190天,其中的内容可能已经有所变动。
在Flutter中,局部刷新通常是通过StatefulWidget
的State
对象来实现的。Flutter提供了几种方法来实现局部刷新,这里介绍的是setState
、StreamBuilder
和ValueListenableBuilder
。
setState
:这是最基本的方法,可以标记一个控件或多个控件需要重新构建,进而触发重新渲染。
class ExampleWidget extends StatefulWidget {
@override
_ExampleWidgetState createState() => _ExampleWidgetState();
}
class _ExampleWidgetState extends State<ExampleWidget> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
RaisedButton(
onPressed: _incrementCounter,
child: Text('Increment'),
),
],
);
}
}
StreamBuilder
:适用于数据流的场景,当数据流接收到新数据时,StreamBuilder
会自动重新构建其子Widget。
Stream<int> counterStream = Stream.periodic(Duration(seconds: 1), (x) => x);
Widget buildStreamExample() {
return StreamBuilder<int>(
stream: counterStream,
builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
if (snapshot.connectionState == ConnectionState.active) {
return Text('Current count is: ${snapshot.data}');
} else {
return Text('Press the button to start');
}
},
);
}
ValueListenableBuilder
:适用于ValueListenable
对象的场景,当value
发生变化时,ValueListenableBuilder
会自动重新构建其子Widget。
final ValueNotifier<int> counter = ValueNotifier<int>(0);
Widget buildValueListenableExample() {
return ValueListenableBuilder<int>(
valueListenable: counter,
builder: (BuildContext context, int value, Widget child) {
return Text('Current count is: $value');
},
);
}
void incrementCounter() {
counter.value++;
}
以上三种方法是实现Flutter局部刷新的常用方式,你可以根据不同的场景选择合适的方法来进行局部刷新。
评论已关闭