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

尝试将BottomNavigationBar中的type设置为BottomNavigationBarType.fixed

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

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

BottomNavigationBarType.shifting，当有四个或更多项目时的默认值。如果selectedItemColor为null，则所有项目均以白色呈现。导航栏的背景颜色与所选项目的BottomNavigationBarItem.backgroundColor相同。在这种情况下，假设每个项目的背景颜色都不同，并且背景颜色与白色的对比度很好。

Answer 2

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

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

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

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

2 个答案: