如何在Flutter多页面应用各页面添加输入框与输入处理功能

1. 封装通用带输入处理的页面组件 #

为避免重复编写输入框与按钮逻辑，我们封装一个通用组件，同时保留列表项展示区域：

class InputHandlingPage extends StatefulWidget {
  final String title;
  final List<String> listItems; // 页面需展示的列表数据

  const InputHandlingPage({
    super.key,
    required this.title,
    required this.listItems,
  });

  @override
  State<InputHandlingPage> createState() => _InputHandlingPageState();
}

class _InputHandlingPageState extends State<InputHandlingPage> {
  final TextEditingController _inputController = TextEditingController();
  String _inputResult = '';

  // 处理用户输入的逻辑
  void _handleInputSubmit() {
    setState(() {
      _inputResult = '你输入的内容：${_inputController.text}';
      // 可扩展其他逻辑：提交后端、本地存储等
    });
    _inputController.clear(); // 清空输入框
  }

  @override
  void dispose() {
    _inputController.dispose(); // 释放控制器，避免内存泄漏
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            // 文本输入框
            TextField(
              controller: _inputController,
              decoration: const InputDecoration(
                hintText: '请输入内容',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 16),
            // 命令按钮
            ElevatedButton(
              onPressed: _handleInputSubmit,
              child: const Text('提交'),
            ),
            const SizedBox(height: 16),
            // 输入结果展示
            Text(_inputResult),
            const SizedBox(height: 24),
            // 原有列表项展示区域
            Expanded(
              child: ListView.builder(
                itemCount: widget.listItems.length,
                itemBuilder: (context, index) {
                  return ListTile(title: Text(widget.listItems[index]));
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

2. 修改抽屉导航的页面跳转逻辑 #

在原Demo的_MyHomePageState中，替换跳转逻辑为使用通用组件：

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

  // 定义各页面的标题与列表数据
  final List<Map<String, dynamic>> _pageData = [
    {
      'title': '首页',
      'items': ['首页项1', '首页项2', '首页项3'],
    },
    {
      'title': '消息页',
      'items': ['消息1', '消息2', '消息3', '消息4'],
    },
    {
      'title': '设置页',
      'items': ['账号设置', '隐私设置', '通用设置'],
    },
  ];

  void _onItemTapped(int index) {
    setState(() => _selectedIndex = index);
    Navigator.pop(context); // 关闭抽屉
    // 跳转到对应输入处理页面
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => InputHandlingPage(
          title: _pageData[index]['title'],
          listItems: _pageData[index]['items'],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(child: Text('当前选中第$_selectedIndex个抽屉项')),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(color: Colors.blue),
              child: Text('抽屉菜单'),
            ),
            ListTile(
              title: const Text('首页'),
              selected: _selectedIndex == 0,
              onTap: () => _onItemTapped(0),
            ),
            ListTile(
              title: const Text('消息页'),
              selected: _selectedIndex == 1,
              onTap: () => _onItemTapped(1),
            ),
            ListTile(
              title: const Text('设置页'),
              selected: _selectedIndex == 2,
              onTap: () => _onItemTapped(2),
            ),
          ],
        ),
      ),
    );
  }
}

关键说明 #

• TextEditingController：控制输入框内容，用于获取用户输入、清空输入框。
• 状态管理：通过setState更新输入结果，保证UI与数据同步。
• 内存管理：组件销毁时释放控制器，避免内存泄漏。
• 复用性：通用组件只需传入不同标题和列表数据，即可快速实现多页面需求，减少重复代码。

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