通信實現(xiàn)方式
回調(diào)通信
需求“點擊子組件拍皮，修改父組件的背景顏色與子組件背景顏色一致”
使用場景：一般用于子組件對父組件傳值。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
///使用場景：一般用于子組件對父組件傳值看铆。
class ParentWidget extends StatefulWidget {
final String? title;
ParentWidget({Key? key,this.title}):super(key: key);
@override
State<StatefulWidget> createState() {
return ParentWidgetState();
}
}
class ParentWidgetState extends State<ParentWidget>{
Color containerBg = Colors.orange;
//回調(diào)函數(shù)
void changeBackgroundColor(Color newColor){
setState(() {
containerBg = newColor;//修改狀態(tài)
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title??""),
),
body: new Center(
child: new GestureDetector(
onTap: (){
},
child: new Container(
width: 300,
height: 300,
color: containerBg,
alignment: Alignment.center,
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
childrenA(childrenABallback: changeBackgroundColor,),
childrenB(childrenBBallback: changeBackgroundColor,),
],
),
),
),
),
);
}
}
///自組件 A
class childrenA extends StatelessWidget {
final ValueChanged<Color>? childrenABallback;
childrenA({Key? key,this.childrenABallback});
@override
Widget build(BuildContext context) {
return new GestureDetector(
onTap: (){
childrenABallback!(Colors.green);
},
child: new Container(
width: 80,
height: 80,
color: Colors.green,
child: new Text("ChildrenA"),
),
);
}
}
///自組件 A
class childrenB extends StatelessWidget {
final ValueChanged<Color>? childrenBBallback;
childrenB({Key? key,this.childrenBBallback});
@override
Widget build(BuildContext context) {
return new GestureDetector(
onTap: (){
childrenBBallback!(Colors.red);
},
child: new Container(
width: 80,
height: 80,
color: Colors.red,
child: new Text("ChildrenB"),
),
);
}
}
2941690359496_.pic.jpg
InheritedWidget 數(shù)據(jù)共享
場景：業(yè)務(wù)開發(fā)中經(jīng)常會碰到這樣的情況，多個Widget需要同步同一份全局數(shù)據(jù)，比如點贊數(shù)授翻、評論數(shù)积暖、夜間模式等等藤为。
使用場景 一般用于父組件對子組件的跨組件傳值。
//模型數(shù)據(jù)
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
///一般用于父組件對子組件的跨組件傳值夺刑。
class InheritedTestModel {
final int count;
const InheritedTestModel(this.count);
}
//哨所（自定義InheritedWidget類）
class InheritedContext extends InheritedWidget {
//變量
final InheritedTestModel inheritedTestModel;
final Function() increment;
final Function() reduce;
InheritedContext({Key? key,
required this.inheritedTestModel,
required this.increment,
required this.reduce,
required Widget child,
}) : super(key:key,child: child);
//定義一個便捷方法缅疟，方便子樹中的widget獲取共享數(shù)據(jù)
static InheritedContext? of(BuildContext context) {
return context.dependOnInheritedWidgetOfExactType<InheritedContext>();
}
//是否重建取決于Widget組件是否相同
@override
bool updateShouldNotify(InheritedContext oldWidget) {
return inheritedTestModel != oldWidget.inheritedTestModel;
}
}
class TestWidgetA extends StatelessWidget {
@override
Widget build(BuildContext context) {
print("TestWidgetA build");
var of = InheritedContext.of(context);
return new Padding(
padding: const EdgeInsets.only(left: 10,top: 10,right: 10),
child: new RaisedButton(
textColor: Colors.black,
child: Text("+"),
onPressed: of?.increment
),
);
}
}
class TestWidgetB extends StatelessWidget {
@override
Widget build(BuildContext context) {
print("TestWidgetB build");
var of = InheritedContext.of(context);
return new Padding(
padding: const EdgeInsets.only(left: 10,top: 10,right: 10),
child: new RaisedButton(
textColor: Colors.black,
child: Text("-"),
onPressed: of?.reduce
),
);
}
}
class TestWidgetC extends StatelessWidget {
@override
Widget build(BuildContext context) {
print("TestWidgetC build");
var of = InheritedContext.of(context);
var model = of?.inheritedTestModel;
return new Padding(
padding: const EdgeInsets.only(left: 10,top: 10,right: 10),
child: new RaisedButton(
textColor: Colors.black,
child: Text('${model?.count}'),
onPressed: (){
}
),
);
}
}
class InheritedWidgetTestContainer extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new InheritedWidgetTestContainerState();
}
}
class InheritedWidgetTestContainerState extends State<InheritedWidgetTestContainer> {
InheritedTestModel? _inheritedTestModel;
_initData(){
_inheritedTestModel = new InheritedTestModel(0);
}
@override
void initState() {
_initData();
super.initState();
}
_incrementCount(){
setState(() {
_inheritedTestModel = new InheritedTestModel(1 + (_inheritedTestModel?.count??0));
});
}
_reduceCount(){
setState(() {
_inheritedTestModel = new InheritedTestModel((_inheritedTestModel?.count??0) - 1);
});
}
@override
Widget build(BuildContext context) {
return InheritedContext(
inheritedTestModel: _inheritedTestModel!,
increment: _incrementCount,
reduce: _reduceCount,
child: Scaffold(
appBar: AppBar(
title: Text('inheritedWidgetTest'),
),
body: new Center(
child: Column(
children: [
TestWidgetA(),
TestWidgetB(),
TestWidgetC()
],
),
),
));
}
}
2951690359496_.pic.jpg
Global Key通信
GlobalKey能夠跨Widget訪問狀態(tài)。
需求“點擊A子組件遍愿，修改B子組件的背景顏色為指定的‘藍色”
使用場景：一般用于跨組件訪問狀態(tài)
//父組件
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
///一般用于跨組件訪問狀態(tài)
class ParentGolablWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new ParentGolablWidgetState();
}
}
GlobalKey<SubWidgetAState> subAkey = GlobalKey();
GlobalKey<SubWidgetBState> subBkey = GlobalKey();
class ParentGolablWidgetState extends State<ParentGolablWidget>{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('組件化'),
),
body: Center(
child: Container(
color: Colors.grey,
width: 200,
height: 200,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SubWidgetA(key: subAkey),
SubWidgetB(key: subBkey),
],
),
),
),
);
}
}
class SubWidgetA extends StatefulWidget{
SubWidgetA({Key? key}):super(key: key);
@override
State<StatefulWidget> createState() {
return SubWidgetAState();
}
}
class SubWidgetAState extends State<SubWidgetA>{
Color _backgroundColors = Colors.red;//紅色
void updateBackGroundColors(Color colos){
setState(() {
_backgroundColors = colos;
});
}
@override
Widget build(BuildContext context) {
return new GestureDetector(
onTap: (){
subBkey.currentState?.updateBackGroundColors(Colors.blue);
setState(() {
_backgroundColors = Colors.red;
});
},
child: new Container(
width: 80,
height: 80,
color: _backgroundColors,
alignment: Alignment.center,
child: Text('subWidgetA'),
),
);
}
}
//子組件B
class SubWidgetB extends StatefulWidget {
SubWidgetB({Key? key}):super(key:key);
@override
State<StatefulWidget> createState() {
return new SubWidgetBState();
}
}
class SubWidgetBState extends State<SubWidgetB>{
Color _backgroundColors = Colors.green;//紅色
void updateBackGroundColors(Color colos){
setState(() {
_backgroundColors = colos;
});
}
@override
Widget build(BuildContext context) {
return new GestureDetector(
onTap: (){
subAkey.currentState?.updateBackGroundColors(Colors.blue);
setState(() {
_backgroundColors = Colors.green;
});
},
child: new Container(
width: 80,
height: 80,
color: _backgroundColors,
alignment: Alignment.center,
child: Text('subWidgetB'),
),
);
}
}
2961690359497_.pic.jpg
ValueNotifier通信
ValueNotifier是一個包含單個值的變更通知器存淫，當它的值改變的時候，會通知它的監(jiān)聽
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class ValueNotifierData extends ValueNotifier<String>{
ValueNotifierData(super.value);
}
class _WidgetOne extends StatefulWidget {
ValueNotifierData? data;
_WidgetOne({this.data});
@override
State<StatefulWidget> createState() {
return _WidgetOneState();
}
}
class _WidgetOneState extends State<_WidgetOne>{
String? info = null;
@override
void initState() {
super.initState();
widget.data?.addListener(_handleValueChange);
info = 'Initial message: ${widget.data?.value}';
}
@override
void dispose() {
widget.data?.removeListener(_handleValueChange);
super.dispose();
}
void _handleValueChange(){
setState(() {
info = 'Message changed to: ${widget.data?.value}' ;
});
}
@override
Widget build(BuildContext context) {
print("_WidgetOneState build()");
return Container(
child: Center(
child: Text(info??''),
),
);
}
}
class ParentValueNotifierCommunication extends StatelessWidget {
@override
Widget build(BuildContext context) {
ValueNotifierData vd = ValueNotifierData('Hello World');
return Scaffold(
appBar: AppBar(title: Text('Value Notifier Communication'),),
body: _WidgetOne(data: vd,),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.refresh),
onPressed: (){
vd.value = 'Yes';
},
),
);
}
2971690359498_.pic.jpg
第三方插件
event_bus來實現(xiàn)傳值
引入插件
import 'package:event_bus/event_bus.dart';
新建消息監(jiān)測類
import 'package:event_bus/event_bus.dart';
EventBus eventBus = new EventBus();
class TransEvent{
String text;
TransEvent(this.text);
}
監(jiān)測類變化
eventBus.on<TransEvent>().listen((TransEvent data) => show(data.text));
void show(String val) {
setState(() {
data = val;
});
}
觸發(fā)消息變化
eventBus.fire(new TransEvent('$inputText'));
