Flutter ClipRRect 边框半径在bottomNavigationBar上不起作用

Question

我正在尝试从我的 swift 应用程序中重新创建一个浮动导航栏。出于某种原因，使用下面的代码，用户界面中仍然没有borderRadius。我尝试过更改颜色，使容器透明，甚至使用带有boxDecoration 的容器。没有什么可以在 UI 中添加 borderRadius。导航栏是否不允许有borderRadius 颤动？这是我的代码：

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

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

class _MyHomeState extends State<MyHome> with SingleTickerProviderStateMixin {

  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 5, vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: TabBarView(
        children: [
          HomeScreen(),
          HomeScreen(),
          HomeScreen(),
          HomeScreen(),
          HomeScreen()
        ],
        controller: _tabController
      ),
      bottomNavigationBar: Container(
        color: Colors.transparent,
        padding: EdgeInsets.all(15),
        child: ClipRRect(
          clipBehavior: Clip.hardEdge,
          borderRadius: BorderRadius.circular(50.0),
          child: Container(
            color: Colors.transparent,
            child: TabBar(
                labelColor: Colors.teal[200],
                unselectedLabelColor: Colors.blueGrey,
                indicator: UnderlineTabIndicator(
                    borderSide: BorderSide(color: Colors.teal),
                    insets: EdgeInsets.fromLTRB(50, 0, 50, 40)
                ),
                indicatorColor: Colors.teal,
                tabs: [
                  Tab(icon: Icon(Icons.home_outlined)),
                  Tab(icon: Icon(Icons.explore_outlined)),
                  Tab(icon: Icon(Icons.camera_alt_outlined)),
                  Tab(icon: Icon(Icons.movie_outlined)),
                  Tab(icon: Icon(Icons.person_outline))
                ],
                controller: _tabController),
          ),
        ),
      ),
    );
  }

Answer 1

我尝试通过将最外层容器的颜色更改为 Colors.transparent 来使用您的代码，这就是我得到的结果。这是您期望的浮动导航栏的结果吗？或许您需要更改 Scaffold 的 backgroundColor 以更好地查看边界半径。