[英]How do I align the elements of the TabBar in flutter?
I have a tab/navigation bar with three options.我有一个带有三个选项的选项卡/导航栏。 The icons in it however are not aligned in the middle.
然而,其中的图标并未在中间对齐。 The icons look aligned on other devices but not on iPhones.
这些图标在其他设备上看起来是对齐的,但在 iPhone 上则不是。 They appear to be pushed a little upwards for some reason.
由于某种原因,它们似乎被向上推了一点。
Widget _bottomNavigationBar(int selectedIndex) =>
Container(
height: 90,
decoration: BoxDecoration(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(52.0),
topRight: Radius.circular(52.0)),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black.withOpacity(0.5),
offset: Offset(-5, 5),
blurRadius: 20,
),
],
),
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(52.0),
topRight: Radius.circular(52.0)),
child: BottomNavigationBar(
selectedItemColor: Color(0xFFFE524B),
unselectedItemColor: Color(0xFFFF8C3B),
onTap: (int index) => setState(() => _selectedIndex = index),
currentIndex: selectedIndex,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(
Entypo.home,
size: 28,
),
title: Text('')),
BottomNavigationBarItem(
icon: Icon(
Entypo.game_controller,
size: 28,
),
title: Text('')),
BottomNavigationBarItem(
icon: Icon(
Entypo.wallet,
size: 28,
),
title: Text('')),
],
),
));
Thank you for your help!感谢您的帮助!
That is happening because of the 'title' in the bottom nav bar.这是因为底部导航栏中的“标题”。 Basically it is rendering a Text widget with an empty string.
基本上它是用空字符串渲染一个文本小部件。 Not seen as its empty but its taking the space.
不被视为它的空,但它占据了空间。
Good thing is that the title property in the BottomNavBar class takes a widget, so, you can pass any widget to it.好消息是BottomNavBar 类中的title 属性接受一个小部件,因此,您可以将任何小部件传递给它。
I'd suggest passing a Padding widget with zero padding, or maybe a Container with a zero height.我建议传递一个零填充的 Padding 小部件,或者一个零高度的容器。 Implementation can look as follows:
实现可以如下所示:
BottomNavigationBarItem(
icon: Icon(
Entypo.home,
size: 28,
),
title: Padding(padding: EdgeInsets.all(0.0))),
BottomNavigationBarItem(
icon: Icon(
Entypo.game_controller,
size: 28,
),
title: Padding(padding: EdgeInsets.all(0.0))),
BottomNavigationBarItem(
icon: Icon(
Entypo.wallet,
size: 28,
),
title: Padding(padding: EdgeInsets.all(0.0))),
],
),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.