Dart/Flutter：如何通过按钮点击实现Widget尺寸调整？

核心实现思路 #

通过状态变量控制菜单面板的宽度，点击按钮切换状态触发UI重绘，实现菜单折叠/展开，同时让信息面板自动适配剩余空间。

完整代码示例 #

import 'package:flutter/material.dart';

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

  @override
  State<Dashboard> createState() => _DashboardState();
}

class _DashboardState extends State<Dashboard> {
  // 标记菜单是否展开
  bool _menuExpanded = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(_menuExpanded ? Icons.chevron_left : Icons.menu),
          onPressed: () {
            setState(() {
              // 点击按钮切换菜单状态
              _menuExpanded = !_menuExpanded;
            });
          },
        ),
        title: const Text('仪表盘'),
      ),
      body: Row(
        children: [
          // 带动画过渡的菜单面板
          AnimatedContainer(
            duration: const Duration(milliseconds: 300),
            width: _menuExpanded ? 240 : 0,
            color: Colors.grey.shade200,
            child: Column(
              children: const [
                ListTile(title: Text('菜单选项1')),
                ListTile(title: Text('菜单选项2')),
                ListTile(title: Text('菜单选项3')),
              ],
            ),
          ),
          // 信息展示面板：自动占满剩余宽度
          Expanded(
            child: Container(
              color: Colors.white,
              child: const Center(
                child: Text('信息展示区域'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

关键细节解析 #

• 状态管理：用_menuExpanded布尔变量记录菜单状态，点击按钮通过setState()更新状态，触发UI重建
• 平滑过渡：使用AnimatedContainer替代普通Container，设置duration实现宽度变化的动画效果，避免切换生硬
• 自适应布局：信息面板用Expanded包裹，会自动填充Row中菜单面板之外的剩余空间，菜单折叠时自然占满全屏
• 交互反馈：按钮图标随菜单状态切换，让用户直观感知操作结果

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