Flutter 中的数据跨层传递方案

最新推荐文章于 2026-05-13 23:29:26 发布

原创

最新推荐文章于 2026-05-13 23:29:26 发布 · 1.5k 阅读

在 Flutter 中，数据跨层传递（从父组件向子组件传递数据，或从子组件向父组件传递）有多种方案，主要包括以下几种：

1. 直接参数传递（Constructor 参数）

适用场景：

父组件向子组件传递数据，适用于层级关系较浅的情况。

示例：

class ParentWidget extends StatelessWidget {
   
   
  final String message = "Hello from Parent";

  @override
  Widget build(BuildContext context) {
   
   
    return ChildWidget(message: message);
  }
}

class ChildWidget extends StatelessWidget {
   
   
  final String message;
  
  const ChildWidget({
   
   required this.message});

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

✅ 优点：简单、直观。
❌ 缺点：如果层级较深，可能需要逐层传递，导致“参数传递链”问题。

2. InheritedWidget（Flutter 低级状态管理方案）

适用场景：

子 Widget 跨层共享父 Widget 的属性，且数据不会频繁更新。

示例：

class MyDataProvider extends InheritedWidget {
   
   
  final String data;

  const MyDataProvider({
   
   required this.data, required Widget child}) : super(child: child);

  static MyDataProvider? of(BuildContext context) {
   
   
    return context.dependOnInheritedWidgetOfExactType<MyDataProvider>();
  }

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

class ParentWidget extends StatelessWidget {
   
   
  @override
  Widget build(BuildContext context) {
   
   
    return MyDataProvider(
      data: "Hello from InheritedWidget",
      child: ChildWidget(),
    );
  }
}

class ChildWidget extends StatelessWidget {
   
   
  @override
  Widget build(BuildContext context) {
   
   
    final provider = MyDataProvider.of(context);
    return Text(provider?.data ?? "No data");
  }
}