图标聚集在带有浮动按钮的颤动底部导航栏中
我正在使用 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))
],
),
),
),
),
],
),
],
),
),
),
I'm making a bottom navigation bar using Inkwell, but as much as I tried solutions, I couldn't separate each icon in its respective space, I don't know what is failing me.
I tried with materialbuttom but the result was almost the same, although if there is any other alternative or suggestion I would like to know! Thankyou
I added the code
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))
],
),
),
),
),
],
),
],
),
),
),
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
尝试这个
结果看起来像这样
try this
Result looks like this
我们可以认为
bottomNavigationBar包含5个小部件，其中一个小部件是FloatingActionButton。因此，我们将包含另一个小部件作为行子项的中间项，它将覆盖 FloatingActionButton 空间。虽然物品可能有不同的尺寸，但我们也需要正确对齐。我们可以用
Expanded包装每个小部件。另外，您可以使用 CrossAxisAlignment: CrossAxisAlignment.stretch 进行测试，或使用每个项目的 LayoutBuilder 约束宽度进行测试。如果发现文本溢出，可以包裹Flexible(child: Text()。有关溢出文本的更多信息< /a>We can think
bottomNavigationBarcontains 5 widgets, one of the widget isFloatingActionButton. Therefor, we will include another widget as middle item of row's children that will coverFloatingActionButtonspace.While items may have different sizes, we also need to align properly. We can wrap every widget with
Expanded. ALso you can test withcrossAxisAlignment: CrossAxisAlignment.stretch,or usingLayoutBuilders constraints width on each item. If you find text overflow, you can wrapFlexible(child: Text(). More about text on overflow尝试下面的代码希望对您有帮助，我尝试了另一种方法。
您可以参考此处一些用于
结果屏幕的软件包->
Try below code hope its help to you, I have try another way.
You can refer here some packages for
Your Result Screen->