好的，我有一个带有 float 操作按钮的底部导航栏，如下所示:
现在，因为我有 float 操作按钮，所以我希望个人资料和主页图标离我的按钮更远。如果我向图标添加填充，标签将不会随图标移动(显然)。
那么现在有人知道我该怎么做吗？
更具体地说，这是我想要的底部栏的图像:
这是我的代码:
class MainNavigationPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () {
//TODO implement later
},
child: Consumer<MainNavigationNotifier>(
builder: (_, notifier, __) => Scaffold(
body: IndexedStack(index: notifier.tabIndex, children: [
IndexedStack(
index: notifier.pages[0].length - 1,
children: notifier.pages[0],
),
IndexedStack(
index: notifier.pages[1].length - 1,
children: notifier.pages[1],
),
]),
floatingActionButtonLocation:
FloatingActionButtonLocation.centerDocked,
floatingActionButton: Align(
alignment: Alignment.bottomCenter,
child: Container(
padding: const EdgeInsets.only(bottom: 6.0),
child: FloatingActionButton(
onPressed: () {},
child: SvgPicture.asset(AppVectors.CREATE_ORDER),
),
),
),
bottomNavigationBar: Container(
decoration: BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(
color: AppColors.LIGHT_GREY.withOpacity(0.4),
blurRadius: 4,
),
],
),
child: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
onTap: notifier.onTabTap(),
elevation: 10,
currentIndex: notifier.tabIndex,
backgroundColor: Theme.of(context).bottomAppBarColor,
selectedItemColor: Theme.of(context).primaryColor,
unselectedItemColor: Theme.of(context).unselectedWidgetColor,
unselectedFontSize: 14,
items: [
BottomNavigationBarItem(
icon: Padding(
padding: const EdgeInsets.only(bottom: 4.0),
child: SvgPicture.asset(
AppVectors.HOME,
height: 25,
color: Theme.of(context).unselectedWidgetColor,
),
),
label: AppStrings.HOME,
tooltip: "",
activeIcon: Padding(
padding: const EdgeInsets.only(bottom: 4.0),
child: SvgPicture.asset(
AppVectors.HOME,
height: 25,
color: Theme.of(context).primaryColor,
),
),
),
BottomNavigationBarItem(
activeIcon: Padding(
padding: const EdgeInsets.all(4.0),
child: SvgPicture.asset(
AppVectors.PROFILE,
height: 27,
width: 27,
color: Theme.of(context).primaryColor,
),
),
tooltip: "",
icon: Padding(
padding: const EdgeInsets.all(4.0),
child: SvgPicture.asset(
AppVectors.PROFILE,
height: 27,
width: 27,
color: Theme.of(context).unselectedWidgetColor,
// color: Theme.of(context).focusColor,
),
),
label: AppStrings.PROFILE),
],
),
),
),
),
);
}
}
最佳答案
您可以对图标和事件图标使用Column，并为Column添加对齐。就像这样
Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [Icon(Icons.people), Text('HOME')],
),
),
),
将 showSelectedLabels: false, showUnselectedLabels: false, 添加到底部导航栏以删除 label.done
这是您可以看到的代码示例 this dartpad code
关于flutter:如何向底部导航栏项目添加填充，使项目彼此保持更远的距离，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68827686/