Flutter中跨組件數(shù)據(jù)傳遞的方法總結(jié)
更新時間：2023年06月14日 11:36:47 作者：縱馬天下
Flutter中的數(shù)據(jù)傳遞一般包括:父->子,子->父，父->父，也就是說嵌套時的傳遞以及跨頁面的傳遞，本文整理了三種我們通常使用的方法，需要的可以參考一下
方法1：InheritedWidget
InheritedWidget：它提供了一種數(shù)據(jù)在Widget樹中從上向下傳遞，共享的方式。我們在應(yīng)用的根Widget中通過InheritedWidget共享了一個數(shù)據(jù)，那么我們可以在任意子Widget中獲取該共享的數(shù)據(jù)！其通用方式就是：
class ShareDataWidget extends InheritedWidget {
final int data;
ShareDataWidget({this.data, Widget child}) : super(child: child);
static ShareDataWidget of(BuildContext context){
return context.dependOnInheritedWidgetOfExactType<ShareDataWidget>();
}
@override
bool updateShouldNotify(ShareDataWidget oldWidget) {
return oldWidget.data !=data;
}
}其實就是繼承InheritedWidget，首先定義需要保存的數(shù)據(jù)比如這里的int型data，然后實現(xiàn)updateShouldNotify方法，最后定義一個獲取該Widget的靜態(tài)方法，在需要使用該保存數(shù)據(jù)的時候通過這個靜態(tài)方法獲取。使用時，在父widget中傳入需要保存的data，在child中通過定義的靜態(tài)方法來獲取最新值。比如定義的parent如下
class Parent extends StatefulWidget {
Parent({Key key}) : super(key: key);
_ParentState createState() => _ParentState();
}
class _ParentState extends State<Parent> with WidgetsBindingObserver {
int _counter = 0;
//當(dāng)Widget第一次插入到Widget樹時會被調(diào)用。對于每一個State對象，F(xiàn)lutter只會調(diào)用該回調(diào)一次
@override
void initState() {
super.initState();
print("page2 parent initState......");
}
@override
void setState(fn) {
super.setState(fn);
print("page2 parent setState......");
}
/*
*初始化時，在initState之后立刻調(diào)用
*當(dāng)State的依賴關(guān)系發(fā)生變化時，會觸發(fā)此接口被調(diào)用
*/
@override
void didChangeDependencies() {
super.didChangeDependencies();
print("page2 parent didChangeDependencies......");
}
@override
void didChangeAppLifecycleState(AppLifecycleState state) {
print("page2 state is $state");
}
//繪制界面
@override
Widget build(BuildContext context) {
print("page2 parent build......");
return Scaffold(
appBar: AppBar(title: Text("setState demo")),
body: Center(
child: ShareDataWidget(
data: _counter,
child: RaisedButton(
///點擊事件
onPressed: () {
setState(() {
_counter++;
});
},
child: Child(),
),
)),
);
}
//狀態(tài)改變的時候會調(diào)用該方法,比如父類調(diào)用了setState
@override
void didUpdateWidget(Parent oldWidget) {
super.didUpdateWidget(oldWidget);
print("page2 parent didUpdateWidget......");
}
//當(dāng)State對象從樹中被移除時，會調(diào)用此回調(diào)
@override
void deactivate() {
super.deactivate();
print('page2 parent deactivate......');
}
//當(dāng)State對象從樹中被永久移除時調(diào)用；通常在此回調(diào)中釋放資源
@override
void dispose() {
super.dispose();
print('page2 parent dispose......');
}
}可以看到我們傳入了_counter屬性到ShareDataWidget中，并且SharedDataWidget的child需要使用共享的變量。我們的Child定義如下
class Child extends StatefulWidget {
Child({Key key}) : super(key: key);
@override
_ChildState createState() => _ChildState();
}
class _ChildState extends State<Child> {
//繪制界面
@override
Widget build(BuildContext context) {
print("child build......");
return Text.rich(TextSpan(children: [
TextSpan(
text: '點擊按鈕查看狀態(tài)變化 count: ${ShareDataWidget.of(context).data.toString()}',
style: TextStyle(color: Color.fromARGB(100, 255, 0, 0))),
TextSpan(
text: "新加的一段文本",
style: TextStyle(color: Colors.blue),
recognizer: TapGestureRecognizer()
..onTap = () {
print("點擊了文本");
})
]));
}
//當(dāng)Widget第一次插入到Widget樹時會被調(diào)用。對于每一個State對象，F(xiàn)lutter只會調(diào)用該回調(diào)一次
@override
void initState() {
super.initState();
print("page2 child initState......");
}
/*
*初始化時，在initState之后立刻調(diào)用
*當(dāng)State的依賴關(guān)系發(fā)生變化時，會觸發(fā)此接口被調(diào)用
*/
@override
void didChangeDependencies() {
super.didChangeDependencies();
print("page2 child didChangeDependencies......");
}
//狀態(tài)改變的時候會調(diào)用該方法,比如父類調(diào)用了setState
@override
void didUpdateWidget(Child oldWidget) {
super.didUpdateWidget(oldWidget);
print("page2 child didUpdateWidget......");
}
//當(dāng)State對象從樹中被移除時，會調(diào)用此回調(diào)
@override
void deactivate() {
super.deactivate();
print('page2 child deactivate......');
}
//當(dāng)State對象從樹中被永久移除時調(diào)用；通常在此回調(diào)中釋放資源
@override
void dispose() {
super.dispose();
print('page2 child dispose......');
}
}其使用就是在Parent中用創(chuàng)建好的ShareDataWidget作為父Widget，在父widget更新需要保存的變量時，同時將數(shù)據(jù)保存在ShareDataWidget的data中，比如上面在parent的build方法中
真正使用這個值的地方是Child類，它的build方法
在parent中觸發(fā)onPress事件其調(diào)用如下
通過使用方式可以看到明顯適用于父->子
方法2：Notification
Notification它的數(shù)據(jù)傳遞方式是從子Widget向上傳遞給父Widget。比如先定義一個notification，這里只有一個msg需要傳遞給父Widget。
class CustomNotification extends Notification{
final String msg;
CustomNotification(this.msg);
}然后定義一個子Widget來發(fā)送這個通知
class CustomChild extends StatelessWidget{
@override
Widget build(BuildContext context) {
return ElevatedButton(onPressed: ()=>CustomNotification("HI").dispatch(context),child: Text("FireNotification"),);
}
}在父widget中使用這個通知
class ParentPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _ParentPageState();
}
}
class _ParentPageState extends State<ParentPage> {
String msg = "通知";
@override
Widget build(BuildContext context) {
return NotificationListener<CustomNotification>(
onNotification: (notification){
setState(() {
msg+=notification.msg+" ";
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [Text(msg), CustomChild()],
));
}
}可以看到父widget中的根是NotificationListener這個監(jiān)聽器，剛才定義的CustomChild是他的子Widget。
方法3：EventBus
這種方式在Android中也經(jīng)常使用，這個就比較簡單了。首先引用該組件event_bus: ^2.0.0。可以在全局聲明一個EventBus實例，比如在main.dart中。
EventBus bus = new EventBus();
在需要接收訂閱的類中
StreamSubscription subscription;
String msg = "event Msg";
//當(dāng)Widget第一次插入到Widget樹時會被調(diào)用。對于每一個State對象，F(xiàn)lutter只會調(diào)用該回調(diào)一次
@override
void initState() {
subscription = bus.on<CustomEvent>().listen((event) {
setState(() {
msg+=event.msg+" ";
});
});
super.initState();
print("page1 initState......");
}這里的subscription其實就是為了防止泄露的，在dispose的時候我們要解除訂閱，CustomEvent其實就是一個類，
class CustomEvent{
String msg;
CustomEvent(this.msg);
}在需要發(fā)送通知的地方
bus.fire(CustomEvent("我是EventBus發(fā)送的"));這個比較適合于父->父。也就是所謂的“頁面間”的數(shù)據(jù)傳遞
以上就是Flutter中跨組件數(shù)據(jù)傳遞的方法總結(jié)的詳細(xì)內(nèi)容，更多關(guān)于Flutter數(shù)據(jù)傳遞的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
android開發(fā)通過Scroller實現(xiàn)過渡滑動效果操作示例
這篇文章主要介紹了android開發(fā)通過Scroller實現(xiàn)過渡滑動效果,結(jié)合實例形式分析了Android Scroller類實現(xiàn)過渡滑動效果的基本原理與實現(xiàn)技巧,需要的朋友可以參考下2020-01-01
Android中關(guān)于CoordinatorLayout的一些實用布局技巧
大家都知道CoordinatorLayout是一個“加強版”的 FrameLayout，那么下面這篇文章主要給大家分享了Android中關(guān)于CoordinatorLayout的一些布局技巧，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-06-06
這篇文章主要為大家詳細(xì)介紹了使用ViewPager2實現(xiàn)簡易輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
今天小編就為大家分享一篇關(guān)于Android中GridView插件的使用方法，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-03-03
這篇文章主要介紹了 Android 圖片選擇詳解及實例代碼的相關(guān)資料,需要的朋友可以參考下2016-12-12
Android AlertDialog自定義樣式實現(xiàn)代碼
這篇文章主要介紹了Android AlertDialog自定義樣式實現(xiàn)代碼的相關(guān)資料,這里提供了實例代碼，一個簡單示例，需要的朋友可以參考下2016-12-12
這篇文章主要介紹了Android仿直播類app贈送禮物功能,本文通過實例代碼效果圖展示的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2020-02-02
Android中Gallery和ImageSwitcher的使用實例
今天小編就為大家分享一篇關(guān)于Android中Gallery和ImageSwitcher的使用實例，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-03-03
Android組件DrawerLayout仿網(wǎng)易新聞v4.4側(cè)滑菜單
這篇文章主要為大家詳細(xì)介紹了Android組件DrawerLayout仿網(wǎng)易新聞v4.4側(cè)滑菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
Android自定義view實現(xiàn)列表內(nèi)左滑刪除Item
這篇文章主要介紹了微信小程序列表中item左滑刪除功能，本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2023-02-02