快捷導(dǎo)航

四種Flutter子頁面向父組件傳遞數(shù)據(jù)的方法介紹

更新時間：2025年01月28日 09:43:46 作者：CherishTaoTao

在?Flutter?中,如果父組件需要調(diào)用子組件的方法,可以通過常用的四種方式實(shí)現(xiàn),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

方法 1：使用 GlobalKey 和 State 調(diào)用子組件方法

這是最直接的方式，通過 GlobalKey 獲取子組件的 State，然后調(diào)用子組件的方法。

示例代碼：

import 'package:flutter/material.dart';

class ParentWidget extends StatefulWidget {
  @override
  _ParentWidgetState createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  // 創(chuàng)建一個 GlobalKey 用于訪問子組件的 State
  final GlobalKey<ChildWidgetState> _childKey = GlobalKey();

  void _callChildMethod() {
    // 通過 GlobalKey 調(diào)用子組件的方法
    _childKey.currentState?.childMethod();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Parent Widget'),
      ),
      body: Column(
        children: [
          ElevatedButton(
            onPressed: _callChildMethod,
            child: Text('Call Child Method'),
          ),
          // 將 GlobalKey 傳遞給子組件
          ChildWidget(key: _childKey),
        ],
      ),
    );
  }
}

class ChildWidget extends StatefulWidget {
  ChildWidget({Key? key}) : super(key: key);

  @override
  ChildWidgetState createState() => ChildWidgetState();
}

class ChildWidgetState extends State<ChildWidget> {
  void childMethod() {
    print('Child method called!');
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(20),
      child: Text('Child Widget'),
    );
  }
}

說明：

在父組件中定義一個 GlobalKey<ChildWidgetState>。

將 GlobalKey 傳遞給子組件。

在父組件中通過 _childKey.currentState?.childMethod() 調(diào)用子組件的方法。

方法 2：通過回調(diào)函數(shù)（Callback）實(shí)現(xiàn)

如果子組件的方法需要在特定時機(jī)被調(diào)用（例如子組件完成某些操作后），可以通過回調(diào)函數(shù)實(shí)現(xiàn)。

示例代碼：

import 'package:flutter/material.dart';

class ParentWidget extends StatefulWidget {
  @override
  _ParentWidgetState createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  void _handleChildMethod() {
    print('Child method called from parent!');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Parent Widget'),
      ),
      body: ChildWidget(
        onChildMethodCalled: _handleChildMethod,
      ),
    );
  }
}

class ChildWidget extends StatelessWidget {
  final VoidCallback onChildMethodCalled;

  ChildWidget({required this.onChildMethodCalled});

  void _callChildMethod() {
    print('Child method called!');
    onChildMethodCalled(); // 調(diào)用父組件傳遞的回調(diào)函數(shù)
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: _callChildMethod,
        child: Text('Call Child Method'),
      ),
    );
  }
}

說明：

父組件通過回調(diào)函數(shù)（onChildMethodCalled）將方法傳遞給子組件。

子組件在需要時調(diào)用該回調(diào)函數(shù)，從而觸發(fā)父組件的邏輯。

方法 3：使用 ValueNotifier 或 ChangeNotifier

如果父組件和子組件之間需要共享狀態(tài)，并且父組件需要在狀態(tài)變化時調(diào)用子組件的方法，可以使用 ValueNotifier 或 ChangeNotifier。

示例代碼：

import 'package:flutter/material.dart';

class ParentWidget extends StatefulWidget {
  @override
  _ParentWidgetState createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  final ValueNotifier<bool> _notifier = ValueNotifier(false);

  void _callChildMethod() {
    _notifier.value = true; // 觸發(fā)子組件的監(jiān)聽
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Parent Widget'),
      ),
      body: Column(
        children: [
          ElevatedButton(
            onPressed: _callChildMethod,
            child: Text('Call Child Method'),
          ),
          ValueListenableBuilder<bool>(
            valueListenable: _notifier,
            builder: (context, value, child) {
              if (value) {
                return ChildWidget();
              }
              return Container();
            },
          ),
        ],
      ),
    );
  }
}

class ChildWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print('Child method called!');
    return Container(
      padding: EdgeInsets.all(20),
      child: Text('Child Widget'),
    );
  }
}

說明：

父組件通過 ValueNotifier 或 ChangeNotifier 管理狀態(tài)。

子組件監(jiān)聽狀態(tài)變化，并在狀態(tài)變化時執(zhí)行邏輯。

方法 4：使用 Navigator.push 和 then 方法

如果子組件是通過導(dǎo)航打開的頁面，可以在子組件關(guān)閉時通過 then 方法觸發(fā)父組件的邏輯。

示例代碼：

import 'package:flutter/material.dart';

class ParentWidget extends StatelessWidget {
  void _callChildMethod() {
    print('Child method called from parent!');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Parent Widget'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            // 打開子組件并等待返回結(jié)果
            final result = await Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => ChildWidget(),
              ),
            );
            if (result == true) {
              _callChildMethod();
            }
          },
          child: Text('Open Child Widget'),
        ),
      ),
    );
  }
}

class ChildWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Child Widget'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context, true); // 返回結(jié)果給父組件
          },
          child: Text('Close and Notify Parent'),
        ),
      ),
    );
  }
}

說明：

父組件通過 Navigator.push 打開子組件，并使用 await 等待子組件的返回結(jié)果。

子組件通過 Navigator.pop 返回結(jié)果，父組件根據(jù)結(jié)果執(zhí)行邏輯。