如何将底部导航项与停靠的晶圆厂完美对齐？

Question

我是颤振的新手。我正在尝试创建一个主屏幕，其中有带有浮动操作按钮（FAB）的底部栏。晶圆厂停靠在底部应用栏的中心。同时，底部应用栏有 4 个底部导航项。目前所有的项目都没有完美地相互对齐。搜索和通知图标离中心太近。有没有办法可以安排它以使其更好并完美对齐？请帮忙。谢谢

当前用户界面：

编码：

import 'package:flutter/material.dart';

class Dashboard extends StatefulWidget {
  _DashboardState createState() => _DashboardState();
}

class _DashboardState extends State<Dashboard> {
  int _selectedPage = 0;
  final _pageOptions = [
    Home(),
    Discover(),
    Notifications(),
    Messages(),
  ];

  Widget build(BuildContext context) {
    final _drawerNav = Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          DrawerHeader(
            child: Text('Drawer Header'),
            decoration: BoxDecoration(color: colorPrimary),
          ),
          ListTile(
            title: Text('Item 1'),
            onTap: () {},
          ),
          Divider(),
          ListTile(
            title: Text('Item 2'),
            onTap: () {},
          ),
          Divider(),
        ],
      ),
    );

    final _bottomNav = BottomAppBar(
      shape: CircularNotchedRectangle(),
      notchMargin: 6,
      clipBehavior: Clip.antiAlias,
      child: BottomNavigationBar(
        selectedItemColor: colorPrimary,
        unselectedItemColor: Colors.grey,
        currentIndex: _selectedPage,
        onTap: (int index) {
          setState(() {
            _selectedPage = index;
          });
        },
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home), title: Container(height: 8.0)),
          BottomNavigationBarItem(
              icon: Icon(Icons.search), title: Container(height: 8.0)),
          BottomNavigationBarItem(
              icon: Icon(Icons.notifications), title: Container(height: 8.0)),
          BottomNavigationBarItem(
              icon: Icon(Icons.message), title: Container(height: 8.0)),
        ],
      ),
    );

    final _fab = FloatingActionButton(
      child: Icon(Icons.add),
      backgroundColor: colorPrimary,
      onPressed: () {},
    );

    return Scaffold(
      appBar: AppBar(
        title: Text('Test'),
        backgroundColor: colorPrimary,
      ),
      drawer: _drawerNav,
      body: _pageOptions[_selectedPage],
      floatingActionButton: _fab,
      bottomNavigationBar: _bottomNav,
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }
}

Answer 1

尝试type在 BottomNavigationBar 中设置BottomNavigationBarType.fixed

底部导航栏的类型会更改其项目的显示方式。如果未指定，则当项目少于四个时，它会自动设置为 BottomNavigationBarType.fixed，否则自动设置为 BottomNavigationBarType.shifting。

BottomNavigationBarType.fixed，项目少于四个时的默认值。如果所选项目非空，则使用 selectedItemColor 进行渲染，否则使用主题的 ThemeData.primaryColor。如果backgroundColor为null，导航栏的背景颜色默认为Material背景颜色ThemeData.canvasColor（本质上是不透明的白色）。

BottomNavigationBarType.shifting，有四个或更多项目时的默认值。如果 selectedItemColor 为 null，则所有项目都呈现为白色。导航栏的背景颜色与所选项目的 BottomNavigationBarItem.backgroundColor 相同。在本例中，假设每个项目都有不同的背景颜色，并且该背景颜色将与白色形成鲜明对比。

Answer 2

我做了一个快速而肮脏的修复

我使用行制作了底部导航栏。我没有使用 4 个孩子，而是使用 5 个。其中一个是虚拟孩子

https://gist.github.com/hariangr/2739c25dda72edcbc18073b907ef057a