Flutter：移除BottomNavigationBar背景色及解决extendBody滚动失效问题

要实现BottomNavigationBar背景透明，同时保证页面内容正常滚动，你需要做两处关键修改：

1. 开启Scaffold的extendBody属性 #

在Scaffold中添加extendBody: true，让页面内容可以延伸到底部导航栏的下方，同时保留底部栏的交互性。

2. 给滚动组件添加底部内边距 #

将body中的Container替换为可滚动组件（比如SingleChildScrollView或ListView），并为其添加底部内边距，确保内容不会被底部导航栏遮挡，能完整滚动到底部。

修改后的完整代码 #

import 'package:flutter/material.dart';

import '../CheckOutPage/Components/pizza_ordered_card.dart';
import '../Utils/GlobalColor/global_color.dart';
import '../Utils/GlobalTextStyles/global_text_styles.dart';
import '../Utils/GlobalWidgetPages/app_bar_center_text.dart';

class OrderHistoryDetailsPage extends StatefulWidget {
  const OrderHistoryDetailsPage({Key? key, this.orderData}) : super(key: key);

  @override
  State<OrderHistoryDetailsPage> createState() =>
      _OrderHistoryDetailsPageState();
}

class _OrderHistoryDetailsPageState extends State<OrderHistoryDetailsPage> {
  @override
  Widget build(BuildContext context) {
    // 可根据底部栏实际高度调整内边距数值
    final bottomPadding = 220.0;

    return Scaffold(
      backgroundColor: MyColor.bgLightColor,
      extendBody: true, // 开启extendBody，让body延伸到底部栏下方
      appBar: AppBarWithCenterText(
        text: "Order History",
        onPressed: () {
          Navigator.pop(context);
        },
      ),
      // 使用SingleChildScrollView包裹内容，添加底部内边距
      body: SingleChildScrollView(
        padding: EdgeInsets.only(bottom: bottomPadding),
        child: Container(
          // 替换为你的实际页面内容，比如订单列表等
          child: Column(
            children: [
              PizzaOrderedCard(),
              PizzaOrderedCard(),
              PizzaOrderedCard(),
              PizzaOrderedCard(),
            ],
          ),
        ),
      ),
      bottomNavigationBar: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            color: Colors.transparent, // 保持底部栏外层背景透明
            child: Container(
              padding: EdgeInsets.only(top: 17, bottom: 14),
              decoration: new BoxDecoration(
                color: MyColor.whiteColor,
                borderRadius: BorderRadius.only(
                    topRight: Radius.circular(15),
                    topLeft: Radius.circular(15)),
                boxShadow: [
                  BoxShadow(
                    color: MyColor.blackColor.withOpacity(0.2),
                    blurRadius: 10.0,
                  ),
                ],
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(
                        left: 20.0, right: 20, bottom: 15),
                    child: Text(
                      "Price Details",
                      style: textStyleWith16500(MyColor.blackColor),
                    ),
                  ),
                  Divider(
                    color: MyColor.greyColor,
                    height: 0.5,
                  ),
                  Padding(
                    padding: const EdgeInsets.only(
                        left: 20, right: 20, top: 12, bottom: 9),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          "Sub Total",
                          style: textStyleWith12500(MyColor.darkGreyColor),
                        ),
                        Text(
                          "₹1095",
                          style: textStyleWith12500(MyColor.darkGreyColor),
                        ),
                      ],
                    ),
                  ),
                  Padding(
                    padding:
                        const EdgeInsets.only(left: 20, right: 20, bottom: 9),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          "Discount",
                          style: textStyleWith12500(MyColor.darkGreyColor),
                        ),
                        Text(
                          "- ₹10",
                          style: textStyleWith12500(MyColor.primaryRedColor),
                        ),
                      ],
                    ),
                  ),
                  Padding(
                    padding:
                        const EdgeInsets.only(left: 20, right: 20, bottom: 9),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          "Wallet",
                          style: textStyleWith12500(MyColor.darkGreyColor),
                        ),
                        Text(
                          "- ₹40",
                          style: textStyleWith12500(MyColor.primaryRedColor),
                        ),
                      ],
                    ),
                  ),
                  Padding(
                    padding:
                        const EdgeInsets.only(left: 20, right: 20, bottom: 9),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          "Taxes",
                          style: textStyleWith12500(MyColor.darkGreyColor),
                        ),
                        Text(
                          "₹4.95",
                          style: textStyleWith12500(MyColor.darkGreyColor),
                        ),
                      ],
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(
                        left: 20, right: 20, top: 2, bottom: 10),
                    child: Divider(color: MyColor.greyColor, height: 0.5),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(left: 20, right: 20),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          "Grand Total",
                          style: textStyleWith12600(MyColor.darkGreyColor),
                        ),
                        Text(
                          "₹1193",
                          style: textStyleWith12600(MyColor.greenColor),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

关键说明 #

• extendBody: true 让Scaffold的body区域延伸到底部导航栏下方，配合底部栏的透明外层容器，实现背景穿透的视觉效果。
• 给SingleChildScrollView添加底部内边距，是为了让滚动内容能完全滚动到底部，不会被底部的价格详情栏遮挡。你可以根据实际布局调整内边距数值，确保内容和底部栏之间有合适的间距。

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