Flutter中点击按钮动态添加多个Support Widget的问题

你当前使用单个布尔值_isExpanded只能控制support1的显示/隐藏，要实现点击按钮添加support2，可通过以下几种方式调整状态管理逻辑：

方案一：使用枚举控制显示状态（推荐） #

这种方式逻辑清晰，便于后续扩展更多support类型：

1. 在_MyHomePageState类中定义枚举和状态变量：

enum SupportDisplayState { none, showSupport1, showSupport2 }
SupportDisplayState _currentState = SupportDisplayState.none;

2. 修改addSupport函数的按钮点击逻辑和Widget显示部分：

SizedBox addSupport() {
  return SizedBox(
    child: SingleChildScrollView(
      child: Column(
        children: [
          ElevatedButton(
            style: ElevatedButton.styleFrom(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10))),
            onPressed: () {
              setState(() {
                // 点击循环切换状态：隐藏 → 显示support1 → 显示support1+support2 → 隐藏
                switch(_currentState) {
                  case SupportDisplayState.none:
                    _currentState = SupportDisplayState.showSupport1;
                    break;
                  case SupportDisplayState.showSupport1:
                    _currentState = SupportDisplayState.showSupport2;
                    break;
                  case SupportDisplayState.showSupport2:
                    _currentState = SupportDisplayState.none;
                    break;
                }
              });
            },
            child: const Text("Add Support"),
          ),
          space(),
          // 根据当前状态显示对应Widget
          if (_currentState == SupportDisplayState.showSupport1 || _currentState == SupportDisplayState.showSupport2) support1(),
          if (_currentState == SupportDisplayState.showSupport2) support2(),
        ],
      ),
    ),
  );
}

方案二：使用两个独立布尔值 #

如果逻辑简单，也可以用两个布尔值分别控制support1和support2的显示：

1. 替换原有的_isExpanded变量：

bool _showSupport1 = false;
bool _showSupport2 = false;

2. 修改addSupport函数：

SizedBox addSupport() {
  return SizedBox(
    child: SingleChildScrollView(
      child: Column(
        children: [
          ElevatedButton(
            style: ElevatedButton.styleFrom(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10))),
            onPressed: () {
              setState(() {
                if (!_showSupport1) {
                  // 第一次点击显示support1
                  _showSupport1 = true;
                } else if (!_showSupport2) {
                  // 第二次点击显示support2
                  _showSupport2 = true;
                } else {
                  // 第三次点击隐藏所有
                  _showSupport1 = false;
                  _showSupport2 = false;
                }
              });
            },
            child: const Text("Add Support"),
          ),
          space(),
          if (_showSupport1) support1(),
          if (_showSupport2) support2(),
        ],
      ),
    ),
  );
}

方案三：动态维护Widget列表（适合可添加多个未知数量的场景） #

如果后续可能需要添加更多support项，可通过列表动态管理：

1. 在_MyHomePageState中定义列表变量：

List<Widget> _supportWidgets = [];

2. 修改addSupport函数：

SizedBox addSupport() {
  return SizedBox(
    child: SingleChildScrollView(
      child: Column(
        children: [
          ElevatedButton(
            style: ElevatedButton.styleFrom(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10))),
            onPressed: () {
              setState(() {
                if (_supportWidgets.length < 2) {
                  // 按顺序添加support1和support2
                  _supportWidgets.add(_supportWidgets.isEmpty ? support1() : support2());
                } else {
                  // 超过两个时清空列表
                  _supportWidgets.clear();
                }
              });
            },
            child: const Text("Add Support"),
          ),
          space(),
          // 展开列表中的所有Widget
          ..._supportWidgets,
        ],
      ),
    ),
  );
}

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