Flutter：如何在AppBar下方正确添加Container容器？

问题核心原因 #

1. 布局溢出未处理：外层Row未添加滚动支持，小屏幕下内容直接超出右侧边界
2. 语法错误：Text组件缺少Text包裹，底部导航栏漏写NavigationBar组件导致结构错误
3. 空间分配混乱：多个Expanded在Row中无规则分配空间，导致Container被挤压或过度拉伸
4. 逻辑错误：DropdownButton的onChanged回调赋值错误，无法切换选项
5. 冗余组件：存在无意义的空DecoratedBox

解决方案步骤 #

• 用SingleChildScrollView包裹外层Row，开启水平滚动避免溢出
• 修正Text组件写法，移除冗余嵌套Row
• 补全底部导航栏的NavigationBar组件结构
• 修复DropdownButton的onChanged赋值逻辑
• 移除空DecoratedBox，用SizedBox替代零散Padding优化间距

修正后的完整代码 #

import 'package:flutter/material.dart';

class Dashboard extends StatefulWidget { // 规范：类名首字母大写
  const Dashboard({super.key});

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

class _DashboardState extends State<Dashboard> {
  int index = 0;
  final screens = [
    const Center(child: Text('DASHBOARD', style: TextStyle(fontSize: 25))),
    const Center(child: Text('POS', style: TextStyle(fontSize: 25))),
    const Center(child: Text('ITEMS', style: TextStyle(fontSize: 25))),
    const Center(child: Text('LIMITED STOCKS', style: TextStyle(fontSize: 25))),
  ];

  int _value = 1;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
          title: const Text(''),
          actions: const <Widget>[
            Icon(Icons.shopping_cart_outlined, color: Colors.indigo),
            SizedBox(width: 20), // 规范：用SizedBox替代Padding
            Icon(Icons.list, color: Colors.indigo),
            SizedBox(width: 10),
          ],
        ),
        body: SingleChildScrollView( // 新增：支持水平滚动解决溢出
          scrollDirection: Axis.horizontal,
          child: Padding( // 新增：整体内边距避免内容贴边
            padding: const EdgeInsets.all(16),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center, // 新增：垂直居中对齐
              children: <Widget>[
                // 修正：移除冗余嵌套Row，补全Text组件
                Row(
                  children: [
                    Image.asset('assets/increase.png', width: 30),
                    const SizedBox(width: 8), // 新增：图片与文字间距
                    const Text(
                      'Revenue Statistics',
                      style: TextStyle(
                        color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold
                      ),
                    ),
                  ],
                ),
                const SizedBox(width: 50), // 规范：用SizedBox替代Padding
                // 调整：用Flexible控制DropdownButton宽度
                Flexible(
                  child: DropdownButton<int>(
                    value: _value,
                    items: const [
                      DropdownMenuItem(child: Text('Overall'), value: 1),
                      DropdownMenuItem(child: Text('OverallA'), value: 2),
                    ],
                    onChanged: (value) {
                      setState(() {
                        _value = value!; // 修正：正确赋值选中值
                      });
                    },
                    hint: const Text('Select item'),
                  ),
                ),
                const SizedBox(width: 16), // 规范：用SizedBox替代零散Padding
                // 调整：用Flexible控制Container宽度，避免过度拉伸
                Flexible(
                  child: Container(
                    margin: const EdgeInsets.all(10),
                    padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12), // 优化：内边距更合理
                    alignment: Alignment.center,
                    decoration: const BoxDecoration(
                      color: Colors.indigo,
                      borderRadius: BorderRadius.all(Radius.circular(10.0)),
                    ),
                    child: const Text(
                      "\$27693.78",
                      style: TextStyle(color: Colors.white, fontSize: 18), // 新增：白色文字提高可读性
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
        bottomNavigationBar: NavigationBarTheme(
          data: NavigationBarThemeData(
            indicatorColor: Colors.indigo,
            labelTextStyle: MaterialStateProperty.all(
              const TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: Colors.grey),
            ),
          ),
          child: NavigationBar( // 修正：补全NavigationBar组件
            selectedIndex: index,
            onDestinationSelected: (index) => setState(() => this.index = index),
            destinations: const [
              NavigationDestination(icon: Icon(Icons.dashboard), label: 'Dashboard'),
              NavigationDestination(icon: Icon(Icons.point_of_sale), label: 'pos'),
              NavigationDestination(icon: Icon(Icons.list), label: 'items'),
              NavigationDestination(icon: Icon(Icons.inventory), label: 'limitedstocks'),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: const Icon(Icons.qr_code_scanner, color: Colors.white),
          backgroundColor: Colors.indigo,
          tooltip: 'Scan QR',
          elevation: 5,
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      ),
    );
  }
}

关键修改说明 #

1. 代码规范：类名改为首字母大写，符合Dart命名规则
2. 溢出处理：添加SingleChildScrollView实现水平滚动，解决右侧像素溢出问题
3. 语法修复：补全Text和NavigationBar组件，解决结构错误导致的布局异常
4. 空间控制：用Flexible替代部分Expanded，避免Container被过度拉伸或挤压
5. 交互修复：修正DropdownButton的赋值逻辑，支持选项正常切换
6. 视觉优化：调整Container内边距和文字颜色，提升可读性

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