如何在BoxDecoration中为Tab添加边距？

Question

我试图在TabBar中实现边距，但没有发现任何东西。所以我的想法是对BoxDecoration参数中TabBar的indicator进行边距处理。

这就是我想要的：

这是我所拥有的：

我的实现代码：

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

此外，您正在使用的Tab窗口小部件在应用填充/边距等方面受到限制。因此，您的选项卡列表应看起来是使用容器，而不是Tab窗口小部件。在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"),
                            ),
                    ),

最后，要获得顶部和底部填充，您必须使用小部件的边框来模拟填充。 （BoxDecoration没有填充属性。）

因此，您需要将“边框”小部件添加到指示器中，并将边框的颜色设置为等于背景色。它应该看起来像这样：

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