import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(
home: ValueListenableWidget(),
));
}
//InheritedWidget 提供从上到下共享数据
class ShareDataWidget extends InheritedWidget {
const ShareDataWidget({
Key? key,
required this.data,
required Widget child,
}) : super(key: key, child: child);
//子树中的共享数据
final int data;
//方便子树获取共享数据
static ShareDataWidget? of(BuildContext context) {
return context.dependOnInheritedWidgetOfExactType<ShareDataWidget>();
}
//data变化是否通知子组件中依赖的data重新build
@override
bool updateShouldNotify(ShareDataWidget old) {
return old.data != data;
}
}
class TestWidget extends StatefulWidget {
const TestWidget({Key? key}) : super(key: key);
@override
_TestWidgetState createState() => _TestWidgetState();
}
class _TestWidgetState extends State<TestWidget> {
@override
Widget build(BuildContext context) {
//使用InheritedWidget中的共享数据
return Text(ShareDataWidget.of(context)!.data.toString());
}
@override
void didChangeDependencies() {
super.didChangeDependencies();
//如果build中没有依赖InheritedWidget,则此回调不会调用。
print("Dependencies change");
}
}
class InheritedWidgetTest extends StatefulWidget {
const InheritedWidgetTest({Key? key}) : super(key: key);
@override
State createState() => _InheritedWidgetTestState();
}
class _InheritedWidgetTestState extends State<InheritedWidgetTest> {
int count = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: ShareDataWidget(
data: count,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.only(bottom: 20.0),
child: TestWidget(),
),
ElevatedButton(
child: const Text("Increment"),
//重新build,ShareDataWidget的data更新
onPressed: () => setState(() => ++count),
)
],
),
),
);
}
}
//局部builder
class ValueListenableWidget extends StatefulWidget {
const ValueListenableWidget({Key? key}) : super(key: key);
@override
State createState() => _ValueListenableState();
}
class _ValueListenableState extends State<ValueListenableWidget> {
static const double textScaleFactor = 1.5;
//数字变化通知 ValueListenableBuilder
final ValueNotifier<int> _counter = ValueNotifier(0);
@override
Widget build(BuildContext context) {
//+ 按钮不会触发组件 build
print('build');
return Scaffold(
appBar: AppBar(title: const Text('ValueListenableBuilder 测试')),
body: Center(
child: ValueListenableBuilder<int>(
builder: (BuildContext context, int value, Widget? child) {
print('_counter change build');
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
child!,
Text('$value 次', textScaleFactor: textScaleFactor),
],
);
},
valueListenable: _counter,
child: const Text('点击了 ', textScaleFactor: textScaleFactor),
),
),
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add),
onPressed: () => _counter.value += 1,
),
);
}
}
InheritedWidget 与 ValueListenableWidget
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 在Flutter中,Widget可以说是第一基础概念。Widget是对用户界面的不可变描述,可被膨化为管理底层渲染...
- 读前须知:此篇文章基本上是Widget - State - Context - InheritedWidget的翻...
- 如果你已经开始学习Flutter了,是不是很熟悉这段代码。 inherited widget就像对其他的Widge...
- 通常情况下,子widget无法单独感知父widget的变化,当父state变化时,通过其build重建所有子wid...
- 参考资料https://zhuoyuan.blog.csdn.net/article/details/83016585