Question

如何从以下bar chart向底部导航栏中的“业务”按钮添加flutter example？我需要在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',
          ),
        ],

Answer 1

在该示例中，您不能真正在此添加任何复杂的内容。您可以在“图标”下使用“堆栈”，然后添加另一个小部件，即带有容器子级的容器，并按所需方式填充它。

但是，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',
        ),
      ]),

如何向底部导航栏添加简单的条形图

1 个答案: