我正在使用 Inkwell 制作底部导航栏,但尽管我尝试了很多解决方案,但我无法在各自的空间中分隔每个图标,我不知道是什么让我失望。
我尝试使用 materialbuttom 但结果几乎相同,尽管如果有任何其他选择或建议我想知道!谢谢
我添加了代码
bottomNavigationBar: BottomAppBar(
shape: const CircularNotchedRectangle(),
notchMargin: 10,
child: SizedBox(
height: 60,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Material(
child: Center(
child: InkWell(
focusColor: Colors.transparent,
hoverColor: Colors.transparent,
highlightColor: Colors.transparent,
onTap: () {
setState(() {
currentTab = 0;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.home),
Text("Home"),
//const Padding(padding: EdgeInsets.all(10))
],
),
),
),
),
Material(
child: Center(
child: InkWell(
focusColor: Colors.transparent,
hoverColor: Colors.transparent,
highlightColor: Colors.transparent,
onTap: () {
setState(() {
currentTab = 1;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.group),
Text("Grupos"),
//const Padding(padding: EdgeInsets.only(left: 10))
],
),
),
),
),
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Material(
child: Center(
child: InkWell(
focusColor: Colors.transparent,
hoverColor: Colors.transparent,
highlightColor: Colors.transparent,
onTap: () {
setState(() {
currentTab = 2;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.checklist_outlined),
Text("Completadas"),
//const Padding(padding: EdgeInsets.only(right: 10))
],
)),
),
),
Material(
child: Center(
child: InkWell(
focusColor: Colors.transparent,
hoverColor: Colors.transparent,
highlightColor: Colors.transparent,
onTap: () {
setState(() {
currentTab = 3;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.person),
Text("Perfil")
//const Padding(padding: EdgeInsets.only(left: 10))
],
),
),
),
),
],
),
],
),
),
),
最佳答案
我们可以认为 bottomNavigationBar
包含 5 个小部件,其中一个小部件是 FloatingActionButton
。因此,我们将包含另一个小部件作为行子项的中间项,它将覆盖 FloatingActionButton
空间。
虽然项目可能有不同的大小,但我们也需要正确对齐。我们可以用 Expanded
包装每个小部件。此外,您还可以使用 crossAxisAlignment: CrossAxisAlignment.stretch,
或在每个项目上使用 LayoutBuilder
的约束宽度进行测试。如果发现文本溢出,可以包裹Flexible(child: Text()
。更多关于text on overflow
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(child: Material(...)),
Expanded(child: Material(...)),
Expanded(child: const SizedBox()), // this will handle the fab spacing
Expanded(child: Material(...)),
Expanded(child: Material(...)),
]
https://stackoverflow.com/questions/71346584/