Flutter中不使用列表，通过Page B按钮点击向Page A添加容器

以下是几种不用列表组件（如ListView）就能实现Page B触发Page A添加BuildCourseContainer的方案：

方案1：回调函数 + 父页面状态维护 #

通过在打开Page B时传递回调函数，让Page B触发回调通知Page A更新状态，Page A用Wrap/Column等布局直接渲染动态添加的容器。

Page A 代码 #

class PageA extends StatefulWidget {
  const PageA({super.key});

  @override
  State<PageA> createState() => _PageAState();
}

class _PageAState extends State<PageA> {
  final List<Widget> _courseContainers = [];

  // 用于接收添加请求的内部方法
  void _addNewContainer() {
    setState(() {
      _courseContainers.add(const BuildCourseContainer());
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Page A')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        // 用Wrap布局替代列表，自动换行排列容器
        child: Wrap(
          spacing: 12,
          runSpacing: 12,
          children: _courseContainers,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => Navigator.push(
          context,
          MaterialPageRoute(
            builder: (_) => PageB(onAddPressed: _addNewContainer),
          ),
        ),
        child: const Icon(Icons.navigate_next),
      ),
    );
  }
}

Page B 修改后的按钮代码 #

class PageB extends StatelessWidget {
  final VoidCallback onAddPressed;

  const PageB({super.key, required this.onAddPressed});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Page B')),
      body: Center(
        child: IconButton(
          iconSize: 48,
          icon: const Icon(Icons.add_circle),
          onPressed: () {
            onAddPressed(); // 触发回调通知Page A添加容器
            Navigator.pop(context); // 可选：添加完成后返回Page A
          },
        ),
      ),
    );
  }
}

方案2：全局状态管理（以Provider为例） #

如果页面层级复杂，回调传递不便，可以用状态管理工具集中维护容器列表，Page A监听状态变化自动更新布局，Page B触发状态更新。

定义状态类 #

class CourseContainerStore extends ChangeNotifier {
  final List<Widget> _containers = [];

  List<Widget> get containers => _containers;

  void addContainer() {
    _containers.add(const BuildCourseContainer());
    notifyListeners(); // 通知监听者更新UI
  }
}

全局注册状态（main.dart） #

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => CourseContainerStore(),
      child: const MyApp(),
    ),
  );
}

Page A 代码 #

class PageA extends StatelessWidget {
  const PageA({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Page A')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        // 通过Consumer监听状态变化，动态渲染容器
        child: Consumer<CourseContainerStore>(
          builder: (context, store, child) {
            return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: store.containers,
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => Navigator.push(
          context,
          MaterialPageRoute(builder: (_) => const PageB()),
        ),
        child: const Icon(Icons.navigate_next),
      ),
    );
  }
}

Page B 修改后的按钮代码 #

IconButton(
  iconSize: 48,
  icon: const Icon(Icons.add_circle),
  onPressed: () {
    // 获取状态实例并触发添加操作
    Provider.of<CourseContainerStore>(context, listen: false).addContainer();
    Navigator.pop(context);
  },
),

方案3：GlobalKey 直接操作父页面状态 #

通过全局Key获取Page A的State实例，直接调用其内部的添加方法，适合简单页面结构，但耦合性较高。

Page A 代码 #

// 定义全局Key
final GlobalKey<_PageAState> pageAGlobalKey = GlobalKey<_PageAState>();

class PageA extends StatefulWidget {
  const PageA({super.key}) : super(key: pageAGlobalKey);

  @override
  State<PageA> createState() => _PageAState();
}

class _PageAState extends State<PageA> {
  final List<Widget> _courseContainers = [];

  // 暴露给外部调用的添加方法
  void addCourseContainer() {
    setState(() {
      _courseContainers.add(const BuildCourseContainer());
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Page A')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Wrap(
          spacing: 12,
          runSpacing: 12,
          children: _courseContainers,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => Navigator.push(
          context,
          MaterialPageRoute(builder: (_) => const PageB()),
        ),
        child: const Icon(Icons.navigate_next),
      ),
    );
  }
}

Page B 修改后的按钮代码 #

IconButton(
  iconSize: 48,
  icon: const Icon(Icons.add_circle),
  onPressed: () {
    // 通过GlobalKey调用Page A的添加方法
    pageAGlobalKey.currentState?.addCourseContainer();
    Navigator.pop(context);
  },
),

内容的提问来源于stack exchange，提问作者Elle Bishop