Flutter/Dart：创建多布局且本地维护状态的Stateful Widget

不需要全局状态管理，直接用StatefulWidget自身的状态就能优雅实现这个需求——把样式切换的变量存在组件内部的State类里，通过setState()触发UI切换不同布局。

完整代码示例 #

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

  @override
  State<DualStyleWidget> createState() => _DualStyleWidgetState();
}

class _DualStyleWidgetState extends State<DualStyleWidget> {
  // 本地维护的状态变量：标记当前使用哪种样式
  bool _useStyleOne = true;

  // 切换样式的方法
  void _toggleStyle() {
    setState(() {
      _useStyleOne = !_useStyleOne;
    });
  }

  // 抽离样式一的布局
  Widget _buildStyleOne() {
    return Container(
      color: Colors.lightBlue,
      padding: const EdgeInsets.all(16),
      child: Column(
        children: [
          const Text('样式一布局', style: TextStyle(color: Colors.white, fontSize: 20)),
          const SizedBox(height: 16),
          ElevatedButton(onPressed: _toggleStyle, child: const Text('切换到样式二'))
        ],
      ),
    );
  }

  // 抽离样式二的布局
  Widget _buildStyleTwo() {
    return Container(
      color: Colors.orange,
      padding: const EdgeInsets.all(16),
      child: Column(
        children: [
          const Text('样式二布局', style: TextStyle(color: Colors.white, fontSize: 20)),
          const SizedBox(height: 16),
          ElevatedButton(onPressed: _toggleStyle, child: const Text('切换到样式一'))
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // 根据状态变量渲染对应布局
    return _useStyleOne ? _buildStyleOne() : _buildStyleTwo();
  }
}

关键说明 #

• 本地状态管理：_useStyleOne变量完全存在组件的State类中，只属于当前组件实例，不会污染全局状态
• 清晰的代码结构：把不同样式的布局抽成单独的_buildStyleX方法，避免build方法过于臃肿，可读性更强
• 标准状态更新：通过setState()触发UI重建，完全遵循Flutter的状态更新机制，没有额外依赖

如果需要维护更多状态（比如输入框内容、选中项等），直接在State类里添加对应的变量即可，所有状态都本地维护，逻辑闭环，非常优雅。

内容的提问来源于stack exchange，提问作者Uwe.Schneider