Flutter开发中如何根据状态动态切换显示的按钮

基础实现（基于 StatefulWidget，无需第三方依赖） #

核心逻辑是通过状态变量控制渲染的组件类型，点击事件触发状态更新后自动刷新UI：

• 首先定义布尔类型的状态变量标记当前展示的按钮，初始值设为true默认展示第一个按钮
• Container的child属性通过条件判断返回对应按钮组件
• 按钮的onPressed回调中调用setState更新状态变量即可完成切换

完整示例代码 #

import 'package:flutter/material.dart';

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

  @override
  State<SwitchBtnDemo> createState() => _SwitchBtnDemoState();
}

class _SwitchBtnDemoState extends State<SwitchBtnDemo> {
  // 状态标记：true展示第一个按钮，false展示第二个按钮
  bool _showFirstBtn = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          // 可保留你的Container原有样式配置
          width: 200,
          height: 60,
          child: _showFirstBtn 
            // 第一个按钮
            ? ElevatedButton(
              onPressed: () {
                setState(() {
                  _showFirstBtn = false;
                });
              },
              child: const Text("初始按钮"),
            )
            // 第二个按钮
            : TextButton(
              onPressed: () {
                // 如果需要点击第二个按钮切回初始状态，可放开下方注释
                // setState(() {
                //   _showFirstBtn = true;
                // });
              },
              child: const Text("切换后的按钮"),
            ),
        ),
      ),
    );
  }
}

扩展说明 #

如果你的项目已经接入了状态管理库（比如GetX、Riverpod等），也可以把状态变量放到对应状态管理类中，无需用StatefulWidget也能实现同样的切换效果。

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