时间戳

首页 > 解决方案 > 如何将简单的条形图添加到底部导航栏

flutter - 如何将简单的条形图添加到底部导航栏

问题描述

如何从以下颤振示例中将条形图添加到底部导航栏中的业务按钮？我是否需要在 lib 文件夹下创建两个不同的 dart 文件，或者我只是在 main.dart 文件中添加图表？

试过了

BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            Stack(
              children:<Widget>[
                width:100,
                height:100,
                color: Colors.red,
                ),
                Container(
                  width:90,
                  height:90,
                  color: Colors.green,
                  ),
                ],
              ),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],

标签： flutter

解决方案

你不能用那个例子在这里添加任何复杂的东西。您可以在 Icon 下使用 Stack ，然后添加另一个小部件，即带有子容器的容器，并按照您想要的方式填充它。

但是，在处理屏幕方面，Flutter 确实很棒。您可以根据需要简单地创建自己的底部导航栏。只需将小部件传递给 bottomNavigationBar 并以您想要的任何方式创建它。

      Scaffold(
        bottomNavigationBar: Container(height: 100, color: Colors.red),

然后你可以用你通常做的任何方式创建小部件。

编辑：

这将是确切的解决方案:)

    BottomNavigationBar(items: [
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label: 'Home',
        ),
        BottomNavigationBarItem(
          label: 'Business',
          icon: Container(
            height: 32,
            width: 50,
            child: Stack(children: [
              Container(
                alignment: Alignment.topCenter,
                child: Icon(Icons.business, size: 24),
              ),
              Positioned(
                top: 28,
                child: Container(
                  width: 50,
                  height: 3,
                  color: Colors.red,
                ),
              ),
              Positioned(
                top: 28,
                child: Container(
                  width: 40,
                  height: 3,
                  color: Colors.green,
                ),
              ),
            ]),
          ),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.school),
          label: 'School',
        ),
      ]),

推荐阅读