Flutter 如何使用这些功能实现底部导航栏？ 共有五个导航项目，宽度为154。我知道这有点奇怪，但UI设计是这样的。至于这一点，我想我不能在颤振库中使用任何关于navigator的小部件 与往常一样，每个项目都包含一个图标和一个文本，但应精确设置两者之间的距离。我不知道是否可以在颤振小部件bottomNavigatorBar中设置 通常，图标、文本和背景的颜色在选中时会发生变化

我所做的：我创建了一个小部件，并将其添加到每个页面的底部。可以想象，当跳转到新页面时，导航栏将重新呈现。这与我们在手机中使用的不同

---

我找到了一些文章和博客，但仍然不能解决我的问题。有参考资料吗？

您可以使用下面的代码将此页面重定向到main.dart，也可以使用test和icon

class nav extends StatefulWidget {
  @override
  _navState createState() => _navState();
}

class _navState extends State<nav> {
  int tabIndex = 0;
  List<Widget> listScreens;

  @override
  void initState() {
    ScreenUtil.init(width: 375, height: 812);
    super.initState();

    listScreens = [
      Home(),
      Treatments(),
      Request(),
      Appointments(),
      Menu(),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: listScreens[tabIndex],
          bottomNavigationBar: new Theme(
            data: Theme.of(context).copyWith(
                canvasColor: Color(0xFF320151),
                primaryColor: Color(0xFF320151)),
            child: BottomNavigationBar(
                backgroundColor: Color(0xFF38095c),
                selectedItemColor: Color(0xFFe34fd1),
                unselectedItemColor: Color(0xFF510382),
                currentIndex: tabIndex,
                onTap: (int index) {
                  setState(() {
                    tabIndex = index;
                  });
                },
                items: [
                  BottomNavigationBarItem(
                    title: Text(""),
                    icon: Container(
                        width: 154, child: Center(child: Icon(AntDesign.home))),
                  ),
                  BottomNavigationBarItem(
                    title: Text(""),
                    icon: Container(
                        width: 153,
                        child: Center(
                            child: Icon(MaterialCommunityIcons.medical_bag))),
                  ),
                  BottomNavigationBarItem(
                    title: Text(""),
                    icon: Container(
                        width: 154,
                        child: Center(child: Icon(Fontisto.share_a))),
                  ),
                  BottomNavigationBarItem(
                    title: Text(""),
                    icon: Container(
                        width: 153,
                        child: Center(child: Icon(AntDesign.calendar))),
                  ),
                  BottomNavigationBarItem(
                    title: Text(""),
                    icon: Container(
                        width: 154,
                        child: Center(child: Icon(Ionicons.ios_person))),
                  ),
                ]),
          )),
    );
  }
}

classnav扩展StatefulWidget{
@凌驾
_navState createState（）=>\u navState（）；
}
类_navState扩展了状态{
int-tabIndex=0；
列表屏幕；
@凌驾
void initState（）{
ScreenUtil.init（宽度：375，高度：812）；
super.initState（）；
列表屏幕=[
Home（），
治疗（），
请求（），
委任（，
菜单（），
];
}
@凌驾
小部件构建（构建上下文）{
返回材料PP(
家：脚手架(
正文：listScreens[tabIndex]，
底部导航栏：新主题(
数据：Theme.of（context）.copyWith(
画布颜色：颜色（0xFF320151），
primaryColor:Color（0xFF320151）），
子项：底部导航栏(
背景颜色：颜色（0xFF38095c），
选择EditemColor:Color（0xFFe34fd1），
unselectedItemColor:Color（0xFF510382），
currentIndex:tabIndex，
onTap：（int索引）{
设置状态（）{
tabIndex=索引；
});
},
项目：[
底部导航气压计(
标题：文本（“”），
图标：容器(
宽度：154，子对象：中心（子对象：图标（AntDesign.home）），
),
底部导航气压计(
标题：文本（“”），
图标：容器(
宽度：153，
儿童：中心(
子：图标（MaterialCommunityCons.medical_bag）），
),
底部导航气压计(
标题：文本（“”），
图标：容器(
宽度：154，
子：中心（子：图标（Fontisto.share_a）），
),
底部导航气压计(
标题：文本（“”），
图标：容器(
宽度：153，
子：中心（子：图标（AntDesign.calendar）），
),
底部导航气压计(
标题：文本（“”），
图标：容器(
宽度：154，
child:Center（child:Icon（Ionicons.ios_person）），
),
]),
)),
);
}
}

你能为你想要实现的用户界面添加一个图像吗？@AdithyaShetty它看起来就像普通的导航器，但正如我所说，它有不同寻常的详细要求。或者您知道如何在不使用Flitter提供的小部件的情况下维护导航栏吗？非常感谢。你的回答给了我灵感。我以为我不能改变每个

底部导航栏的宽度，但实际上它是可以设计的。