flutter - 如何在 Tab 的 BoxDecoration 中添加边距？

Question

我试图在 TabBar 中实现边距，但我没有找到任何东西。所以我的想法是在indicator参数中对TabBar的BoxDecoration做一个margin。

这就是我想要的:

这是我的:

我的实现代码:

DefaultTabController(
                length: 2,
                initialIndex: 0,
                child: Padding(
                  padding: kPaddingTabBar,
                  child: Container(
                    decoration: BoxDecoration(
                      color: kLightGrey,
                      borderRadius: BorderRadius.all(
                        Radius.circular(50),
                      ),
                    ),
                    child: TabBar(
                      tabs: <Tab>[
                        Tab(text: kArtwork),
                        Tab(text: kPastJobs)
                      ],
                      unselectedLabelColor: Colors.black54,
                      labelColor: Colors.black,
                      unselectedLabelStyle: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontFamily: kRobotoBold,
                      ),
                      labelStyle: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontFamily: kRobotoBold,
                      ),
                      indicatorSize: TabBarIndicatorSize.tab,
                      indicator: BoxDecoration(
                        shape: BoxShape.rectangle,
                        borderRadius: BorderRadius.circular(50),
                        color: Colors.white,
                      ),
                    ),
                  ),
                ),
              )

Answer 1

看起来您可以更改两件事来更好地控制标签栏指示器。一、根据indicatorSize文档，如果 indicatorSize 是 TabBarIndicatorSize.tab，则所选选项卡指示器的大小是相对于选项卡的整体边界定义的，如果 indicatorSize 是 TabBarIndicatorSize.label，则相对于选项卡小部件的边界定义。

因此，第一个更改是将 TabBarIndicatorSize.tab 更改为:

TabBarIndicatorSize.label

此外，您正在使用的选项卡小部件在应用填充/边距等方面的能力受到限制。因此，您的选项卡列表应该看起来使用容器，而不是选项卡小部件。它在 TabBar() 小部件内部应该看起来像这样:

tabs: <Widget>[
                    Container(
                      padding: const EdgeInsets.all(10.0),
                      width: 100, 
                      height: 40,
                      child: Center(
                        child:Text("kArtwork"),
                      ),
                    ),
                    Container(
                      padding: const EdgeInsets.all(10.0),
                      width: 100, 
                      height: 40,
                      child: Center(child: 
                             Text("kPastJobs"),
                            ),
                    ),

最后，要得到top和bottom padding，还得用widget的border来模拟padding。 (BoxDecoration 没有填充属性。)

因此，您需要向指示器添加一个边框小部件，并将边框颜色设置为与背景颜色相同。它应该看起来像这样:

indicator: BoxDecoration(
                    border: Border.all(color: Colors.grey, width: 2),
                    shape: BoxShape.rectangle,
                    borderRadius: BorderRadius.circular(50),
                    color: Colors.white,
                  ),