我如何在颤振中有效地实现居中的底部导航栏设计答案

【问题标题】：How can i efficiently implement centered bottom navbar design in flutter我如何在颤振中有效地实现居中的底部导航栏设计
【发布时间】：2022-01-04 03:41:06
【问题描述】：

我正在尝试使用 Flutter for mobile 实现这个底部导航栏设计，但我无法弄清楚我到底做错了什么。我希望它均匀分布并居中。这是设计图

我尝试了不同的方法，但这是我能得到的最接近设计的输出

更多上下文，这是我使用的代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:iconly/iconly.dart';

class DashBoardScreen extends StatefulWidget {
  const DashBoardScreen({Key? key}) : super(key: key);

  @override
  _DashBoardScreenState createState() => _DashBoardScreenState();
}

class _DashBoardScreenState extends 
State<DashBoardScreen> {
  var currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;

return Scaffold(
  bottomNavigationBar: Container(
    height: size.width * .155,
    decoration: BoxDecoration(
      color: Colors.white,
    ),
    child: ListView.builder(
      itemCount: 4,
      scrollDirection: Axis.horizontal,
      padding: EdgeInsets.symmetric(horizontal: size.width * .024),
      itemBuilder: (context, index) => InkWell(
        onTap: () {
          setState(
            () {
              currentIndex = index;
            },
          );
        },
        splashColor: Colors.transparent,
        highlightColor: Colors.transparent,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            AnimatedContainer(
              duration: Duration(milliseconds: 1500),
              curve: Curves.fastLinearToSlowEaseIn,
              margin: EdgeInsets.only(
                bottom: index == currentIndex ? 0 : size.width * .029,
                right: size.width * .0422,
                left: size.width * .0422,
              ),
              width: size.width * .128,
              height: index == currentIndex ? 4 : 0,
              decoration: BoxDecoration(
                color: Color(0xff25307e),
              ),
            ),
            Icon(
              index == currentIndex
                  ? listOfIconsBold[index]
                  : listOfIconsLight[index],
              size: size.width * .076,
              color: index == currentIndex
                  ? Color(0xff25307e)
                  : Colors.black38,
            ),
            Text(
              listOfText[index],
              style: TextStyle(
                fontSize: 12,
                fontWeight: FontWeight.w400,
                color: index == currentIndex
                    ? Color(0xff25307e)
                    : Colors.black38,
              ),
            ),
          ],
        ),
      ),
    ),
  ),
);
  }

  List<IconData> listOfIconsLight = [
IconlyLight.category,
IconlyLight.chart,
IconlyLight.document,
IconlyLight.work
  ];
   List<IconData> listOfIconsBold = [
     IconlyBold.category,
     IconlyBold.chart,

     IconlyBold.document,
     IconlyBold.work
   
];

      List<String> listOfText = ['Dashboard', 'Analytics', 'My Products', 'Manage'];
 }

【问题讨论】：

标签： flutter dart flutter-layout flutter-animation

【解决方案1】：

您不需要使用 ListView 小部件，除非您希望它可滚动。

只需使用mainAxisSize: MainAxisSize.max 创建一个Row 以使其占据整个宽度，并使用mainAxisAlignment: MainAxisAlignment.spaceEvenly 将孩子居中/隔开。 children: 不必是预定义列表。它也可以是一个返回小部件列表的函数（您的图标和列中的文本）

Row(
  mainAxisSize: MainAxisSize.min,
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: navItems(),
)

...

List<Widget> navItems() {
  List<Widget> w = [];
  
  for (int i = 0; i<4; i++) {
    w.add(Column(/*same column as in your code*/));
  }
  
  return w;
}

【讨论】：