Flutter实现点击按钮跨页面添加Widget功能

Flutter完全支持跨页面触发Widget生成的需求，下面是两种常用的实现方案，根据你的场景选择即可：

方案一：Navigator传参 + 目标页面维护状态 #

适合页面交互逻辑简单、仅需单次/多次传参的场景。核心思路是在输入页面收集数据后，通过路由跳转/返回时将数据传递给目标页面，目标页面维护一个数据列表，通过setState更新列表并生成对应的Widget。

输入页面代码示例 #

class InputPage extends StatefulWidget {
  @override
  _InputPageState createState() => _InputPageState();
}

class _InputPageState extends State<InputPage> {
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('输入页面')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _controller,
              decoration: InputDecoration(hintText: '输入内容'),
            ),
            ElevatedButton(
              onPressed: () {
                final inputContent = _controller.text.trim();
                if (inputContent.isNotEmpty) {
                  // 将数据返回给上一页（目标页面）
                  Navigator.pop(context, inputContent);
                }
              },
              child: Text('保存'),
            )
          ],
        ),
      ),
    );
  }
}

目标页面代码示例 #

class TargetPage extends StatefulWidget {
  @override
  _TargetPageState createState() => _TargetPageState();
}

class _TargetPageState extends State<TargetPage> {
  List<String> _widgetData = [];

  Future<void> _openInputPage() async {
    final result = await Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => InputPage()),
    );
    if (result != null && result is String) {
      setState(() {
        _widgetData.add(result);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('目标页面')),
      body: ListView.builder(
        itemCount: _widgetData.length,
        itemBuilder: (context, index) {
          // 根据数据生成自定义Widget
          return Card(
            margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: Padding(
              padding: EdgeInsets.all(16),
              child: Text('自定义Widget ${index+1}: ${_widgetData[index]}'),
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _openInputPage,
        child: Icon(Icons.add),
      ),
    );
  }
}

方案二：状态管理工具（以Provider为例） #

适合多页面共享数据、交互逻辑复杂的场景。通过全局状态管理类存储数据，输入页面更新状态，目标页面监听状态变化自动刷新Widget。

1. 定义状态管理类 #

import 'package:flutter/material.dart';

class WidgetDataStore extends ChangeNotifier {
  final List<String> _dataList = [];

  List<String> get dataList => _dataList;

  void addWidgetData(String data) {
    _dataList.add(data);
    notifyListeners(); // 通知所有监听页面刷新
  }
}

2. 在应用入口注册状态 #

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => WidgetDataStore(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TargetPage(),
    );
  }
}

3. 输入页面更新状态 #

class InputPage extends StatefulWidget {
  @override
  _InputPageState createState() => _InputPageState();
}

class _InputPageState extends State<InputPage> {
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('输入页面')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _controller,
              decoration: InputDecoration(hintText: '输入内容'),
            ),
            ElevatedButton(
              onPressed: () {
                final inputContent = _controller.text.trim();
                if (inputContent.isNotEmpty) {
                  // 更新全局状态
                  Provider.of<WidgetDataStore>(context, listen: false)
                      .addWidgetData(inputContent);
                  Navigator.pop(context);
                }
              },
              child: Text('保存'),
            )
          ],
        ),
      ),
    );
  }
}

4. 目标页面监听状态 #

class TargetPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 监听状态变化，自动刷新
    final dataList = Provider.of<WidgetDataStore>(context).dataList;
    
    return Scaffold(
      appBar: AppBar(title: Text('目标页面')),
      body: ListView.builder(
        itemCount: dataList.length,
        itemBuilder: (context, index) {
          return Card(
            margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: Padding(
              padding: EdgeInsets.all(16),
              child: Text('自定义Widget ${index+1}: ${dataList[index]}'),
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => InputPage()),
        ),
        child: Icon(Icons.add),
      ),
    );
  }
}

两种方案都能实现你的需求：简单场景选方案一，复杂多页面交互选方案二。

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