Flutter状态管理求助：实现点击按钮显示添加项按钮功能

作为Flutter状态管理新手，用最基础的StatefulWidget+setState就能实现需求，不用复杂的状态管理库，步骤如下：

1. 定义核心状态变量 #

在State类里声明控制UI和存储数据的变量：

• bool _showAddItemSection = false;：控制添加项目输入区域的显示/隐藏
• List<String> _items = [];：存储用户添加的所有项目
• TextEditingController _itemController = TextEditingController();：获取输入框内容

2. 改造你的"ADD"组件，添加点击事件 #

用GestureDetector包裹你提供的ADD组件，点击后切换显示状态：

GestureDetector(
  onTap: () {
    setState(() {
      _showAddItemSection = !_showAddItemSection;
    });
  },
  child: Padding(
    padding: const EdgeInsets.only(right: 15, top: 50),
    child: SizedBox(
      width: 102,
      height: 58,
      child: Container(
        padding: const EdgeInsets.all(5),
        decoration: BoxDecoration(
          border: Border.all(color: Colors.white),
          color: Colors.white,
          borderRadius: BorderRadius.circular(6),
        ),
        child: const Center(
          child: Text(
            'Add',
            style: TextStyle(
              fontSize: 23,
              fontWeight: FontWeight.w700,
              color: Color(0XFFDF2C25),
            ),
          ),
        ),
      ),
    ),
  ),
)

3. 添加输入区域和项目列表展示 #

当_showAddItemSection为true时，显示输入框和确认按钮，同时展示已添加的项目：

// 输入区域
if (_showAddItemSection)
  Padding(
    padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
    child: Row(
      children: [
        Expanded(
          child: TextField(
            controller: _itemController,
            decoration: const InputDecoration(
              hintText: '输入项目名称',
              border: OutlineInputBorder(),
            ),
          ),
        ),
        const SizedBox(width: 10),
        ElevatedButton(
          onPressed: () {
            if (_itemController.text.isNotEmpty) {
              setState(() {
                _items.add(_itemController.text);
                _itemController.clear();
              });
            }
          },
          style: ElevatedButton.styleFrom(
            backgroundColor: const Color(0XFFDF2C25),
            foregroundColor: Colors.white,
          ),
          child: const Text('确认添加'),
        ),
      ],
    ),
  ),

// 已添加项目列表
Expanded(
  child: Padding(
    padding: const EdgeInsets.symmetric(horizontal: 15),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          '已添加项目:',
          style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
        ),
        const SizedBox(height: 10),
        Expanded(
          child: ListView.builder(
            itemCount: _items.length,
            itemBuilder: (context, index) {
              return Padding(
                padding: const EdgeInsets.only(bottom: 8),
                child: Container(
                  padding: const EdgeInsets.all(12),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(6),
                  ),
                  child: Text(_items[index]),
                ),
              );
            },
          ),
        ),
      ],
    ),
  ),
)

4. 完整代码示例 #

把以上部分整合到一个StatefulWidget中：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey[300],
        body: const AddItemPage(),
      ),
    );
  }
}

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

  @override
  State<AddItemPage> createState() => _AddItemPageState();
}

class _AddItemPageState extends State<AddItemPage> {
  bool _showAddItemSection = false;
  List<String> _items = [];
  final TextEditingController _itemController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        // 可点击的ADD按钮
        GestureDetector(
          onTap: () {
            setState(() {
              _showAddItemSection = !_showAddItemSection;
            });
          },
          child: Padding(
            padding: const EdgeInsets.only(right: 15, top: 50),
            child: SizedBox(
              width: 102,
              height: 58,
              child: Container(
                padding: const EdgeInsets.all(5),
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.white),
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(6),
                ),
                child: const Center(
                  child: Text(
                    'Add',
                    style: TextStyle(
                      fontSize: 23,
                      fontWeight: FontWeight.w700,
                      color: Color(0XFFDF2C25),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),

        // 添加项目输入区域
        if (_showAddItemSection)
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _itemController,
                    decoration: const InputDecoration(
                      hintText: '输入项目名称',
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
                const SizedBox(width: 10),
                ElevatedButton(
                  onPressed: () {
                    if (_itemController.text.isNotEmpty) {
                      setState(() {
                        _items.add(_itemController.text);
                        _itemController.clear();
                      });
                    }
                  },
                  style: ElevatedButton.styleFrom(
                    backgroundColor: const Color(0XFFDF2C25),
                    foregroundColor: Colors.white,
                  ),
                  child: const Text('确认添加'),
                ),
              ],
            ),
          ),

        // 已添加项目列表
        Expanded(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 15),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text(
                  '已添加项目:',
                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                ),
                const SizedBox(height: 10),
                Expanded(
                  child: ListView.builder(
                    itemCount: _items.length,
                    itemBuilder: (context, index) {
                      return Padding(
                        padding: const EdgeInsets.only(bottom: 8),
                        child: Container(
                          padding: const EdgeInsets.all(12),
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(6),
                          ),
                          child: Text(_items[index]),
                        ),
                      );
                    },
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

关键逻辑说明 #

• 点击"ADD"按钮时，通过setState切换_showAddItemSection的值，触发UI更新以显示/隐藏输入区域
• 点击"确认添加"按钮时，判断输入内容非空后，将内容加入_items列表，再次调用setState更新列表展示
• 用ListView.builder展示项目列表，自动处理多项目的滚动需求

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