我有一个带有三个选项的标签/导航栏。但是其中的图标未在中间对齐。图标在其他设备上看起来对齐,但在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('')),
],
),
));
谢谢您的帮助!
最佳答案
发生这种情况是因为底部导航栏中的“标题”。基本上,它正在渲染带有空字符串的Text小部件。不被视为是空的,而是占据了空间。
好消息是BottomNavBar类中的title属性带有一个小部件,因此,您可以将任何小部件传递给它。
我建议传递一个填充为零填充的填充小部件,或者传递一个高度为零的容器。
实现可以如下所示:
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))),
],
),