Flutter实现点击按钮切换另一按钮显示状态与样式

你的需求核心是通过点击操作切换两个按钮的样式状态，无需用多个Visibility组件重复创建按钮实例，直接通过状态变量控制单个按钮的样式即可，这样代码更简洁易维护。

实现思路 #

• 定义两个布尔状态变量，分别标记Show和Hide按钮是否处于改变后的样式；
• 每个按钮的背景色、边框、文字颜色根据对应状态变量动态切换；
• 点击Show按钮时，更新状态让Hide按钮切换为改变后的样式，Show按钮保持原样式；
• 点击Hide按钮时，更新状态让Hide按钮恢复原样式，Show按钮切换为改变后的样式。

完整代码示例 #

class _DemoState extends State<Demo> {
  // 标记按钮是否处于改变后的样式，初始都为原样式
  bool _isShowStyled = false;
  bool _isHideStyled = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // Show按钮
              InkWell(
                onTap: () {
                  setState(() {
                    // 点击Show：Hide变样式，Show保持原样式
                    _isHideStyled = true;
                    _isShowStyled = false;
                  });
                },
                child: Container(
                  height: 50,
                  width: MediaQuery.of(context).size.width / 2,
                  // 根据状态切换样式
                  decoration: _isShowStyled
                      ? BoxDecoration(
                          color: AppTheme.white,
                          border: Border.all(width: 2, color: AppTheme.orange),
                        )
                      : BoxDecoration(color: AppTheme.orange),
                  child: Padding(
                    padding: const EdgeInsets.all(12.5),
                    child: Text(
                      "Show",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontSize: 13.0,
                        fontFamily: "Segoe UI Bold",
                        // 根据状态切换文字颜色
                        color: _isShowStyled ? AppTheme.orange : AppTheme.white,
                      ),
                    ),
                  ),
                ),
              ),
              SizedBox(height: 10),
              // Hide按钮
              InkWell(
                onTap: () {
                  setState(() {
                    // 点击Hide：Hide恢复原样式，Show变样式
                    _isHideStyled = false;
                    _isShowStyled = true;
                  });
                },
                child: Container(
                  height: 50,
                  width: MediaQuery.of(context).size.width / 2,
                  // 根据状态切换样式
                  decoration: _isHideStyled
                      ? BoxDecoration(
                          color: AppTheme.white,
                          border: Border.all(width: 2, color: AppTheme.orange),
                        )
                      : BoxDecoration(color: AppTheme.orange),
                  child: Padding(
                    padding: const EdgeInsets.all(12.5),
                    child: Text(
                      "Hide",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontSize: 13.0,
                        fontFamily: "Segoe UI Bold",
                        // 根据状态切换文字颜色
                        color: _isHideStyled ? AppTheme.orange : AppTheme.white,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

关键说明 #

1. 状态变量：_isShowStyled和_isHideStyled分别控制对应按钮的样式状态，true表示处于改变后的样式（白色背景+橙色边框+橙色文字），false表示原样式（橙色背景+白色文字）；
2. 样式切换：通过三目运算符? :根据状态变量动态设置decoration和文字颜色，避免重复编写相同结构的按钮代码；
3. 点击事件：在onTap回调中调用setState更新状态，触发UI重建，实现样式切换。

如果你的业务场景确实需要控制按钮的显示隐藏（而非仅样式变化），可以在上述代码基础上，给按钮外层包裹Visibility组件，通过额外的状态变量控制visible属性即可。

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