时间戳

首页 > 解决方案 > Flutter 调整浮动操作按钮的底部标签间距

flutter - Flutter 调整浮动操作按钮的底部标签间距

问题描述

我正在尝试调整选项卡的间距，以使其在停靠在底部中心的浮动操作按钮附近看起来不尴尬。我正在考虑添加一个“不可见”图标，但这意味着用户可能会错误地点击它，我认为这不是最好的解决方法。

我的小部件：

Widget build(context) {
  return new Scaffold(
    body: TabBarView(
      children: _displayTabPages(),
    ),
    bottomNavigationBar: BottomAppBar(
      child: _createTabBar(),
      color: Colors.blue,
      shape: CircularNotchedRectangle(),
      notchMargin: 5.0,
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    floatingActionButton: FloatingActionButton(
      onPressed: () {},
      tooltip: 'Add Transaction',
      backgroundColor: Colors.orange[300],
      foregroundColor: Colors.black87,
      child: Icon(FontAwesomeIcons.plus),
      elevation: 2.0,
    ),
  );
}

我的标签栏：

Widget _createTabBar() {
  return TabBar(
    tabs: [
      Tab(
        icon: new Icon(FontAwesomeIcons.list),
      ),
      Tab(
        icon: new Icon(FontAwesomeIcons.calendarAlt),
      ),
      Tab(
        icon: new Icon(FontAwesomeIcons.chartPie),
      ),
      Tab(
        icon: new Icon(FontAwesomeIcons.cog),
      )
    ],
    labelColor: Colors.white,
    unselectedLabelColor: Colors.black87,
    indicatorColor: Colors.blue,
  );
}

以上创建了这个：

底部应用栏

有没有办法修复中间图标之间的间距？

标签： flutter

解决方案

您可以通过添加 centerItemText 来参考以下两个链接来解决您的问题。您也可以使用空白空间而不是文本。

https://medium.com/coding-with-flutter/flutter-bottomappbar-navigation-with-fab-8b962bb55013

https://github.com/bizz84/bottom_bar_fab_flutter/blob/master/lib/fab_bottom_app_bar.dart

推荐阅读