Question

我试图在TabBar中实现边距，但没有找到任何东西。因此，我的想法是在BoxDecoration参数中为TabBar的{{1}}留出一个空白。

这就是我想要的：

this is what I want

这就是我所拥有的：

this is what I have

我的实现代码：

indicator

Answer 1

您似乎可以更改两项以更好地控制标签栏指示器。首先，根据indicatorSize文档，如果indicatorSize为TabBarIndicatorSize.tab，则相对于选项卡的整体边界定义所选标签指示符的大小；如果indicatorSize为TabBarIndicatorSize.label，则相对于选项卡小部件的边界定义。< / p>

因此，第一个更改是将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"),
                            ),
                    ),

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

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

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

Answer 2

您可以通过以下方式添加空间：将标签栏小部件包装到填充上并为其填充填充

       Padding(
                  padding: const EdgeInsets.all(10.0),
                  width: 100, 
                  height: 40,
                  child: Center(
                    child:Text("kArtwork"),
                  ),
                ),

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

2 个答案: