Flutter页面模块化：按钮组件选中状态无法正常切换求助

1. 不该直接修改父组件传的参数：你在DiscoverButton里用setState改了widget.pressed，但Flutter里StatefulWidget的成员变量规范上应该是不可变的（用final修饰），而且你改的只是子组件内部的副本，父页面的selectedButton根本没更新，其他按钮完全不知道当前选中的是哪一个。
2. 状态没统一管理：按钮写在页面里时，状态由父页面统一控制；抽离成独立组件后，每个按钮自己尝试修改状态，导致各按钮状态不一致，旧按钮不知道自己该恢复原色。

第一步：把按钮改成纯展示组件 #

让DiscoverButton只负责显示样式和触发点击事件，将状态判断与更新逻辑完全交给父页面：

class DiscoverButton extends StatelessWidget {
  const DiscoverButton({
    Key? key,
    required this.isSelected,
    required this.onTap,
    required this.text,
  }) : super(key: key);

  // 由父组件传入的选中状态
  final bool isSelected;
  // 点击后通知父组件更新状态的回调
  final VoidCallback onTap;
  // 按钮显示文字
  final String text;

  @override
  Widget build(BuildContext context) {
    return TextButton(
      style: TextButton.styleFrom(
        foregroundColor: isSelected
            ? AppColor.DarkBlueTextColor
            : AppColor.DiscoverPageLightText,
      ),
      onPressed: onTap,
      child: Text(
        text,
        style: const TextStyle(fontSize: 18),
      ),
    );
  }
}

第二步：父页面统一管理选中状态 #

在父页面的State类中维护selectedButton变量（用索引标记当前选中的按钮），点击按钮时更新该变量，所有按钮根据这个值判断自身是否选中：

// 父页面的State类中
int selectedButton = 0; // 默认选中第一个按钮

// 构建底部导航栏的代码
bottomNavigationBar: Container(
  decoration: const BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(20)),
    color: AppColor.AppLightBlueColor,
  ),
  height: (MediaQuery.of(context).size.height / 8),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    mainAxisSize: MainAxisSize.max,
    children: [
      Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          DiscoverButton(
            isSelected: selectedButton == 0,
            onTap: () {
              setState(() {
                selectedButton = 0;
              });
            },
            text: 'Discover',
          ),
        ],
      ),
      // 第二个按钮示例
      Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          DiscoverButton(
            isSelected: selectedButton == 1,
            onTap: () {
              setState(() {
                selectedButton = 1;
              });
            },
            text: 'My Page',
          ),
        ],
      ),
    ],
  ),
)

核心逻辑 #

将状态集中在父组件管理，子组件只承担“展示+触发事件”的职责。父组件更新选中状态后，会重新构建所有子按钮，每个按钮根据最新的selectedButton值自动切换样式，这样选中新按钮时旧按钮会自动恢复原色。

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