Flutter中如何实现带透明弧形区域的底部导航栏

我明白你的需求——想要让弧形导航栏的空缺部分透明，露出下方的ListView内容。这其实只需要两个关键调整就能实现：

关键修改点 #

• 给Scaffold添加extendBody: true：这个属性会让页面的body部分延伸到底部导航栏的下方，这样弧形的空缺区域就能显示body的内容。
• 将CurvedNavigationBar的backgroundColor设置为Colors.transparent：移除弧形区域的默认背景色，让它完全透明。

修改后的完整代码 #

import 'package:flutter/material.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: BottomNavBar(),
    );
  }
}

class BottomNavBar extends StatefulWidget {
  const BottomNavBar({Key? key}) : super(key: key);

  @override
  _BottomNavBarState createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {
  int _page = 0;
  final GlobalKey<CurvedNavigationBarState> _bottomNavigationKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 添加这个属性，让body延伸到底部导航栏下方
      extendBody: true,
      bottomNavigationBar: CurvedNavigationBar(
        key: _bottomNavigationKey,
        index: 0,
        height: 60.0,
        items: <Widget>[
          bottomItem(
            title: "Wish List",
            index: 0,
            icon: Icons.favorite_border),
          bottomItem(title: "Home", index: 1, icon: Icons.home),
          bottomItem(title: "My Cart", index: 2, icon: Icons.shopping_cart),
        ],
        color: Colors.black,
        buttonBackgroundColor: Colors.white,
        // 把背景色改成透明
        backgroundColor: Colors.transparent,
        animationCurve: Curves.easeInOut,
        animationDuration: const Duration(milliseconds: 600),
        onTap: (index) {
          setState(() {
            _page = index;
          });
        },
        letIndexChange: (index) => true,
      ),
      body: ListView.builder(
          itemCount: 100,
          itemBuilder: (context, index) {
            return Container(
              height: 150,
              color: Colors.primaries[index % Colors.primaries.length],
              child: FittedBox(
                child: Text(index.toString()),
              ),
            );
          }));
  }

  Widget bottomItem(
      {required int index, required String title, required IconData icon}) {
    if (index == _page) {
      return Icon(
        icon,
        size: 26,
        color: Colors.black,
      );
    } else {
      return Padding(
        padding: const EdgeInsets.only(top: 6.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              icon,
              size: 22,
              color: Colors.white,
            ),
            const SizedBox(height: 5),
            Text(
              title,
              style: const TextStyle(color: Colors.white),
            )
          ],
        ),
      );
    }
  }
}

原理说明 #

• extendBody: true 是Flutter Scaffold的原生属性，它会让body的内容覆盖到底部导航栏的位置，而不是被导航栏截断。
• CurvedNavigationBar的backgroundColor控制的是弧形空缺部分的背景颜色，设置为透明后，就会显示下方body的内容。

这样修改后，你就能看到弧形区域完全透明，下方的ListView内容可以透过弧形区域显示出来，和你期望的效果一致。

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