右侧 RenderFlex 溢出 8.0 像素答案

【问题标题】：A RenderFlex overflowed by 8.0 pixels on the right右侧 RenderFlex 溢出 8.0 像素
【发布时间】：2021-09-07 22:33:13
【问题描述】：

enter image description here 我在导航栏中有一个 RenderFlex 溢出并尝试修复它，但我不能，所以你能帮我吗？我尝试了更多问题，例如 crossAxisAlignment、mainAxisAlignment、将扩展的更改为容器、将容器更改为扩展等等。

你可以看底部的代码，我放一张图来理解我的意思。

  @override
  Widget build(BuildContext context) {
    return BottomAppBar(
      notchMargin: 10,
      elevation: 30,
      color: Theme.of(context).backgroundColor,
      shape: CircularNotchedRectangle(),
      child: Container(
        height: 75.h,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                MaterialButton(
                  highlightColor: Colors.transparent,
                  onPressed: () => changeIndex(0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Icon(
                        IconData(0xe902, fontFamily: 'DFSIcons'),
                        size: 25.sp,
                        color: currentTab == 0
                            ? Theme.of(context).primaryColor
                            : Colors.grey[700],
                      ),
                      Texts(
                        Translations.of(context).home ?? "",
                        color: currentTab == 0
                            ? Theme.of(context).primaryColor
                            : Colors.grey[700],
                        style: TextStyles.CAPTION,
                      ),
                    ],
                  ),
                ),
                MaterialButton(
                  highlightColor: Colors.transparent,
                  onPressed: () => changeIndex(1),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      SvgPicture.asset(
                        'assets/SVG/inbox.svg',
                        width: 20.w,
                        height: 20.w,
                        color: currentTab == 1
                            ? Theme.of(context).primaryColor
                            : Colors.grey[700],
                      ),
                      Texts(
                        Translations.of(context).inbox ?? "",
                        color: currentTab == 1
                            ? Theme.of(context).primaryColor
                            : Colors.grey[700],
                        style: TextStyles.CAPTION,
                      ),
                    ],
                  ),
                ),
              ],
            ),
            Row(
              children: [
                MaterialButton(
                  // minWidth: 85.w,
                  highlightColor: Colors.transparent,
                  onPressed: () => changeIndex(2),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Icon(
                        IconData(0xe901, fontFamily: 'DFSIcons'),
                        size: 25.sp,
                        color: currentTab == 2
                            ? Theme.of(context).primaryColor
                            : Colors.grey[700],
                      ),
                      Texts(
                        Translations.of(context).appointments ?? "",
                        color: currentTab == 2
                            ? Theme.of(context).primaryColor
                            : Colors.grey[700],
                        style: TextStyles.CAPTION,
                      ),
                    ],
                  ),
                ),
                MaterialButton(
                  //   minWidth: 85.w,
                  highlightColor: Colors.transparent,
                  onPressed: () => changeIndex(3),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Icon(
                        IconData(0xe900, fontFamily: 'DFSIcons'),
                        size: 25.sp,
                        color: currentTab == 3
                            ? Theme.of(context).primaryColor
                            : Colors.grey[700],
                      ),
                      Texts(
                        Translations.of(context).profile ?? "",
                        color: currentTab == 3
                            ? Theme.of(context).primaryColor
                            : Colors.grey[700],
                        style: TextStyles.CAPTION,
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
 [enter image description here][1] }
}

【问题讨论】：

标签： flutter dart widget

【解决方案1】：

尝试将所有 MaterialButton 放在单个 Row 中，或者直接使用 BottomNavigationBar 小部件。

【讨论】：