Question

共有五个导航项目，宽度为154,153,154,153,154。我知道这有点奇怪，但是UI设计就是这样。为此，我想我不能在flutter lib中使用任何与navigator有关的小部件。
每个项目都照常包含一个icon和一个text，但两者之间的距离应准确设置。我不知道是否可以在flutter小部件bottomNavigatorBar中设置它。
通常，选中后图标，文本和背景的颜色将更改。

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

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

Answer 1

您可以使用以下代码并将此页面重定向到main.dart中，还可以使用测试和图标。

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))),
                  ),
                ]),
          )),
    );
  }
}

如何使用这些功能实现底部导航栏？

1 个答案: