如何在底部导航栏中添加一个简单的条形图

Question

如何在下面的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',
),
],

Answer 1

在这个例子中，您实际上无法添加任何复杂的内容。您可以使用图标下的Stack，然后添加另一个小部件，即带有容器子项的container，并按照您想要的方式填充它。

然而，Flutter在处理屏幕方面确实很棒。您可以根据自己的意愿创建自己的底部导航栏。只需将小部件传递到底部导航栏，然后以任何您想要的方式创建它。

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