![](/img/trans.png)
[英]How do I add background color to unselected tabs in flutter tabbar?
[英]How do I align the elements of the TabBar in flutter?
我有一个带有三个选项的选项卡/导航栏。 然而,其中的图标并未在中间对齐。 这些图标在其他设备上看起来是对齐的,但在 iPhone 上则不是。 由于某种原因,它们似乎被向上推了一点。
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('')),
],
),
));
感谢您的帮助!
这是因为底部导航栏中的“标题”。 基本上它是用空字符串渲染一个文本小部件。 不被视为它的空,但它占据了空间。
好消息是BottomNavBar 类中的title 属性接受一个小部件,因此,您可以将任何小部件传递给它。
我建议传递一个零填充的 Padding 小部件,或者一个零高度的容器。 实现可以如下所示:
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.