flutter - 图标聚集在带有 float 按钮的 flutter 底部导航栏中

Question

我正在使用 Inkwell 制作底部导航栏，但尽管我尝试了很多解决方案，但我无法在各自的空间中分隔每个图标，我不知道是什么让我失望。

我尝试使用 materialbuttom 但结果几乎相同，尽管如果有任何其他选择或建议我想知道!谢谢

我添加了代码

bottomNavigationBar: BottomAppBar(
    shape: const CircularNotchedRectangle(),
    notchMargin: 10,
    child: SizedBox(
      height: 60,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Material(
                child: Center(
                  child: InkWell(
                    focusColor: Colors.transparent,
                    hoverColor: Colors.transparent,
                    highlightColor: Colors.transparent,
                    onTap: () {
                      setState(() {
                        currentTab = 0;
                      });
                    },
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(Icons.home),
                        Text("Home"),
                        //const Padding(padding: EdgeInsets.all(10))
                      ],
                    ),
                  ),
                ),
              ),
              Material(
                child: Center(
                  child: InkWell(
                    focusColor: Colors.transparent,
                    hoverColor: Colors.transparent,
                    highlightColor: Colors.transparent,
                    onTap: () {
                      setState(() {
                        currentTab = 1;
                      });
                    },
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(Icons.group),
                        Text("Grupos"),
                        //const Padding(padding: EdgeInsets.only(left: 10))
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Material(
                child: Center(
                  child: InkWell(
                      focusColor: Colors.transparent,
                      hoverColor: Colors.transparent,
                      highlightColor: Colors.transparent,
                      onTap: () {
                        setState(() {
                          currentTab = 2;
                        });
                      },
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Icon(Icons.checklist_outlined),
                          Text("Completadas"),
                          //const Padding(padding: EdgeInsets.only(right: 10))
                        ],
                      )),
                ),
              ),
              Material(
                child: Center(
                  child: InkWell(
                    focusColor: Colors.transparent,
                    hoverColor: Colors.transparent,
                    highlightColor: Colors.transparent,
                    onTap: () {
                      setState(() {
                        currentTab = 3;
                      });
                    },
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(Icons.person),
                        Text("Perfil")
                        //const Padding(padding: EdgeInsets.only(left: 10))
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    ),
  ),

Answer 1

我们可以认为 bottomNavigationBar 包含 5 个小部件，其中一个小部件是 FloatingActionButton。因此，我们将包含另一个小部件作为行子项的中间项，它将覆盖 FloatingActionButton 空间。

虽然项目可能有不同的大小，但我们也需要正确对齐。我们可以用 Expanded 包装每个小部件。此外，您还可以使用 crossAxisAlignment: CrossAxisAlignment.stretch, 或在每个项目上使用 LayoutBuilder 的约束宽度进行测试。如果发现文本溢出，可以包裹Flexible(child: Text()。更多关于text on overflow

 Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Expanded(child: Material(...)),
    Expanded(child: Material(...)),
    Expanded(child: const SizedBox()), // this will handle the fab spacing
    Expanded(child: Material(...)),
    Expanded(child: Material(...)),

   ]