在 Flutter Tab bar 中，选中的 tab bar size 和 tab bar size 不能对齐。如何对齐？答案

【问题标题】：In Flutter Tab bar, selected tab bar size and tab bar size can't align. How to align?在 Flutter Tab bar 中，选中的 tab bar size 和 tab bar size 不能对齐。如何对齐？
【发布时间】：2021-04-15 04:41:56
【问题描述】：

Flutter 选项卡栏，选中的选项卡栏指示器和每个选项卡的大小不相等。我使用带有指示器装饰的选定指示器，并使用 PreferredSized 将每个选项卡包装在容器内。但是不能对齐。如何与所选指标和每个容器对齐等于？

This is my screen shot of the tab bar problem.

bottom: PreferredSize(
      preferredSize: Size(40, 40),
      child: Container(
        height: getScreenHeightRation(40.0),
        decoration: BoxDecoration(
          color: Color(0xFFF0C185),
          border: Border.all(color: Colors.grey[600]),
        ),
        child: TabBar(
          indicatorPadding: EdgeInsets.symmetric(horizontal: 40),
          indicatorSize: TabBarIndicatorSize.tab,
          indicatorColor: Colors.transparent,
          indicator: BoxDecoration(
            color: Color(0xFFD2A368),
          ),
          tabs: [
            Container(
              decoration: BoxDecoration(
                  border: Border(right: BorderSide(color: Colors.grey))
              ),
              child: Tab(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    ImageIcon(AssetImage('assets/images/icon_ext/menu.png')),
                    SizedBox(
                      width: 5.0,
                    ),
                  ],
                ),
              ),
            ),
            Container(
              width: 150,
              decoration: BoxDecoration(
                  border: Border(right: BorderSide(color: Colors.grey))
              ),
              child: Tab(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    ImageIcon(AssetImage('assets/images/icon_ext/image.png')),
                    SizedBox(
                      width: 5.0,
                    ),
                  ],
                ),
              ),
            ),
            Container(
              width: 150,
              child: Tab(
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    ImageIcon(
                        AssetImage('assets/images/icon_ext/placeholder.png')),
                    SizedBox(
                      width: 5.0,
                    ),
             
                  ],
                ),
              ),
            )
          ],
          controller: tabController,
        ),
      ),
    ),

【问题讨论】：

标签： flutter tabbar

【解决方案1】：

这是 Flutter 的一个已知问题，尚未修复。 https://github.com/flutter/flutter/issues/63700

暂时可以通过添加来修复

labelPadding: EdgeInsets.only(left: 10),

我还建议使容器的宽度与屏幕大小除以选项卡的数量相匹配，而不是硬编码。不定义宽度也可以

width: MediaQuery.of(context).size.width / 3,

【讨论】：

添加标签填充以很好地适应，尽管定义容器宽度与否。但是只添加带有屏幕比例的容器宽度是不适合的。