Flutter框架中，组件间传值的基本方式-Toy模板网

这篇具有很好参考价值的文章主要介绍了Flutter框架中，组件间传值的基本方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.构造函数传值

在创建widget时，可以通过构造函数将参数传递给子widget。例如：

class ChildWidget extends StatelessWidget {
  final String title;

  const ChildWidget({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(title);
  }
}

class ParentWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChildWidget(title: 'Hello World');
  }
}

2.回调函数传值

父widget可以在创建子widget时，传递一个回调函数，当子widget需要把值传给父widget时，就调用这个回调函数。例如：

class ChildWidget extends StatelessWidget {
  final ValueChanged<String> onChanged;

  const ChildWidget({Key? key, required this.onChanged}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextField(
      onChanged: (value) {
        onChanged(value); // 调用回调函数
      },
    );
  }
}

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

class _ParentWidgetState extends State<ParentWidget> {
  String _text = '';

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ChildWidget(
          onChanged: (value) {
            setState(() {
              _text = value; // 更新状态
            });
          },
        ),
        Text(_text),
      ],
    );
  }
}

3.InheritedWidget传值

InheritedWidget是Flutter框架提供的一种特殊的widget，它可以沿着widget树向下传递数据。当需要在widget树中共享数据时，可以使用InheritedWidget。例如：

class MyInheritedWidget extends InheritedWidget {
  final String data;

  MyInheritedWidget({Key? key, required this.data, required Widget child})
      : super(key: key, child: child);

  static MyInheritedWidget of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>()!;
  }

  @override
  bool updateShouldNotify(MyInheritedWidget oldWidget) {
    return data != oldWidget.data;
  }
}

class ChildWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final data = MyInheritedWidget.of(context).data;
    return Text(data);
  }
}

class ParentWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MyInheritedWidget(
      data: 'Hello World',
      child: ChildWidget(),
    );
  }
}