如何让Flutter TabBar项按不同比例占满屏幕宽度？

要实现TabBar里两个标签按9:1的比例分配宽度，且随窗口自适应，你可以这么改：

核心思路 #

1. 关闭TabBar的滚动模式（isScrollable: false），让它填充AppBar底部的整个宽度
2. 用Expanded组件包裹每个Tab，通过flex属性设置宽度比例："Chats"占9份，"Me"占1份

修改后的完整代码 #

return Scaffold(
  appBar: AppBar(
    backgroundColor: Theme.of(context).primaryColor,
    title: const Text("AppName"),
    elevation: 0.7,
    bottom: TabBar(
      controller: _tabController,
      indicatorColor: Theme.of(context).accentColor,
      isScrollable: false, // 关键：关闭滚动，让TabBar占满整个宽度
      tabs: [
        Expanded(
          flex: 9, // 对应90%宽度
          child: Tab(text: "Chats"),
        ),
        Expanded(
          flex: 1, // 对应10%宽度
          child: Tab(text: "Me"),
        ),
      ],
    ),
  ),
);

补充说明 #

• 确保你的_tabController初始化正确，长度设为2：

late TabController _tabController;

@override
void initState() {
  super.initState();
  _tabController = TabController(length: 2, vsync: this);
}

@override
void dispose() {
  _tabController.dispose();
  super.dispose();
}

• Expanded的flex属性会按比例分配可用空间，总flex值为10时，9份对应90%、1份对应10%，窗口宽度变化时会自动维持这个比例

内容的提问来源于stack exchange，提问作者laughincascade