Flutter系列之设置TabBar的tab紧凑排列

我们在使用flutter的TabBar组件的时候会发现，TabBar当中的tab的是平分宽度的，因为TabBar中的tab是一个flex布局，

如果你只有两三个tab，想让它紧凑排列，应该怎么办呢？

要设置一个属性 isScrollable 为 true

TabBar(
  labelColor: Colors.primaryTextColor,
  labelStyle:
      TextStyle(color: Colors.primaryTextColor, fontSize: 14),
  unselectedLabelColor: Colors.primaryTextColor,
  unselectedLabelStyle:
      TextStyle(color: Colors.primaryTextColor, fontSize: 14),
  isScrollable: true,
  indicator: BoxDecoration(
      color: Colors.amber,
      borderRadius: BorderRadius.all(Radius.circular(15))),
  controller: _tabController,
  onTap: _changeTab,
  tabs: _subjectList.map((e) => Tab(text: e.subjectName)).toList(),
)

设置 isScrollable 为 true就可以让TabBar中的tab紧凑排列，这是为什么呢？

看下源码：

final int tabCount = widget.tabs.length;
    for (int index = 0; index < tabCount; index += 1) {
      wrappedTabs[index] = InkWell(
        mouseCursor: widget.mouseCursor ?? SystemMouseCursors.click,
        onTap: () { _handleTap(index); },
        child: Padding(
          padding: EdgeInsets.only(bottom: widget.indicatorWeight),
          child: Stack(
            children: [
              wrappedTabs[index],
              Semantics(
                selected: index == _currentIndex,
                label: localizations.tabLabel(tabIndex: index + 1, tabCount: tabCount),
              ),
            ],
          ),
        ),
      );
      if (!widget.isScrollable)
        wrappedTabs[index] = Expanded(child: wrappedTabs[index]);
    }

看最后一段，如果widget不是isScrollable的话，会加嵌套一层Expanded布局，Expanded就是flex = 1，所以就是平分父容器，

如果是scrollable的话，就会自适应大小