Flutter：如何格式化Bottom Navigation Bar并实现指定购物车图标样式

根据Figma设计图需求，需要实现带圆角边框、指定配色，且购物车图标带右上角角标的底部导航栏。原代码使用BottomNavigationBar无法实现预期效果，以下是完整解决方案：

完整实现代码 #

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: const Center(child: Text("主页面")),
        bottomNavigationBar: Container(
          // 给底部导航栏添加边距，避免贴满屏幕
          margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
          decoration: BoxDecoration(
            color: Colors.white,
            // 设置圆角边框
            borderRadius: BorderRadius.circular(24),
            // 添加阴影增强层次感
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.2),
                blurRadius: 8,
                offset: const Offset(0, -2),
              ),
            ],
          ),
          child: BottomAppBar(
            elevation: 0,
            color: Colors.transparent,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                // 首页图标
                IconButton(
                  icon: const Icon(Icons.home, size: 28, color: Colors.grey),
                  onPressed: () {},
                ),
                // 带角标的购物车图标
                Stack(
                  children: [
                    const Icon(Icons.shopping_cart, size: 28, color: Colors.grey),
                    Positioned(
                      top: 0,
                      right: 0,
                      child: Container(
                        padding: const EdgeInsets.all(4),
                        decoration: const BoxDecoration(
                          color: Colors.red,
                          shape: BoxShape.circle,
                        ),
                        child: const Text(
                          "3",
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 10,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
                // 个人中心图标
                IconButton(
                  icon: const Icon(Icons.person, size: 28, color: Colors.grey),
                  onPressed: () {},
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

关键实现说明 #

• 圆角背景：通过外层Container的decoration属性设置圆角和阴影，替代默认BottomNavigationBar的固定样式
• 购物车角标：使用Stack组件叠加图标和角标容器，通过Positioned精准控制角标的右上角位置，角标采用圆形红色背景包裹数字
• 自定义布局：改用BottomAppBar+Row的组合，摆脱BottomNavigationBar的样式限制，更灵活调整每个图标的位置、尺寸和颜色

内容的提问来源于stack exchange，提问作者Asma'a Alndhari