Flutter如何通过左侧导航切换右侧容器的显示Widget？求最简方案

核心思路 #

用StatefulWidget管理状态，通过一个变量存储当前显示的主视图，点击导航按钮时更新变量并触发UI刷新。

实现步骤 #

1. 定义状态变量存储当前视图
2. 左侧导航按钮绑定点击事件，通过setState()更新视图变量
3. 右侧主容器直接使用这个视图变量

完整代码示例 #

主页面（核心逻辑）

import 'package:flutter/material.dart';
import 'logo.dart';
import 'form.dart';

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

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  // 初始化显示Logo视图
  Widget _currentMainView = const Logo();

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        // 左侧导航栏容器
        Container(
          width: 220,
          color: Colors.grey[100],
          padding: const EdgeInsets.symmetric(vertical: 20),
          child: Column(
            children: [
              // 第一个导航按钮：切换到表单
              ElevatedButton(
                style: ElevatedButton.styleFrom(minimumSize: const Size(180, 50)),
                onPressed: () {
                  setState(() {
                    _currentMainView = const MyForm();
                  });
                },
                child: const Text('打开表单'),
              ),
              const SizedBox(height: 16),
              // 可选：返回Logo的按钮
              ElevatedButton(
                style: ElevatedButton.styleFrom(minimumSize: const Size(180, 50)),
                onPressed: () {
                  setState(() {
                    _currentMainView = const Logo();
                  });
                },
                child: const Text('返回Logo'),
              ),
            ],
          ),
        ),
        // 右侧主视图容器
        Expanded(
          child: Container(
            padding: const EdgeInsets.all(20),
            child: _currentMainView, // 直接绑定状态变量
          ),
        ),
      ],
    );
  }
}

其他文件的Widget示例

// logo.dart
class Logo extends StatelessWidget {
  const Logo({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text(
        'Logo 视图',
        style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
      ),
    );
  }
}

// form.dart
class MyForm extends StatelessWidget {
  const MyForm({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('表单视图', style: TextStyle(fontSize: 24)),
          SizedBox(height: 20),
          TextField(decoration: InputDecoration(hintText: '输入用户名')),
          SizedBox(height: 10),
          TextField(decoration: InputDecoration(hintText: '输入密码')),
          SizedBox(height: 20),
          ElevatedButton(onPressed: null, child: Text('提交')),
        ],
      ),
    );
  }
}

关键说明 #

• setState()是核心：它会通知Flutter框架状态已变更，触发UI重新渲染
• 状态变量_currentMainView可以存储任何Widget，后续新增导航项只需添加按钮并更新该变量即可
• 这种方式是最简的本地状态管理方案，适合小型页面的视图切换场景

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