0

我正在尝试从我的快速应用程序中重新创建一个浮动导航栏。borderRadius出于某种原因，使用下面的代码，用户界面中仍然没有。我尝试过更改颜色，使容器透明，甚至使用带有boxDecoration. 没有什么可以添加borderRadius到 UI 中。导航栏是否不允许出现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),
          ),
        ),
      ),
    );
  }
4

1 回答 1

1

描述

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

于 2021-12-30T03:56:05.567 回答