在使用BLoC构建器时,如果想要避免不必要的UI重新渲染,可以使用StreamBuilder
组件来监听BLoC的状态变化,并根据状态更新UI。
以下是一个示例代码:
import 'package:flutter/material.dart';
import 'dart:async';
// 创建一个简单的BLoC类
class CounterBloc {
StreamController _counterController = StreamController();
Stream get counterStream => _counterController.stream;
int _counter = 0;
void incrementCounter() {
_counter++;
_counterController.sink.add(_counter);
}
void dispose() {
_counterController.close();
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'BLoC Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
// 创建一个BLoC实例
final CounterBloc _counterBloc = CounterBloc();
@override
void dispose() {
// 在页面销毁时清理BLoC
_counterBloc.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('BLoC Demo'),
),
body: Center(
child: StreamBuilder(
stream: _counterBloc.counterStream,
initialData: 0,
builder: (BuildContext context, AsyncSnapshot snapshot) {
return Text(
'Counter: ${snapshot.data}',
style: TextStyle(fontSize: 24),
);
},
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
_counterBloc.incrementCounter();
},
child: Icon(Icons.add),
),
);
}
}
在上述代码中,首先定义了一个简单的CounterBloc
类,该类有一个计数器变量和一个用于监听计数器变化的counterStream
。在incrementCounter
方法中,通过sink.add
将计数器的最新值发送到counterStream
中。
在_MyHomePageState
的build
方法中,使用StreamBuilder
来监听_counterBloc.counterStream
的状态变化。StreamBuilder
会自动根据新的状态值重新构建UI,从而避免不必要的UI重新渲染。
通过这种方式,可以实现BLoC构建器不会重新渲染UI的效果。