flutter - 调整 TabBar 项目以填充整个屏幕宽度但具有不同的比例？

Question

我正在尝试进入 Flutter 开发，并且我一直在遵循一些与我正在尝试制作的应用程序相匹配的教程。现在，我主要是一名 Web 开发人员，所以我认为这将是一项与 CSS 一样简单的任务，但由于某种原因，我试图实现的一个非常简单的任务已被证明比我更具挑战性希望如此。

我有一个 AppBar 项目，附加了一个 TabBar 项目，其中有两个文本项目，它们是“Chats”和“Me”。顾名思义，“聊天”选项卡将保存聊天窗口，而“我”选项卡将保存与当前用户相关的快速选项，因此，我希望“聊天”窗口优先，使其成为一个更大的项目。我尝试将 TabBar 设置为 Scrollable，但它所做的只是将选项卡项设置为其内容的宽度并将其居中。然后我可以调整它们的宽度，但尺寸会失去响应能力。

有没有办法让一个项目占据 TabBar 的 90% 和另外 10%？ 下面是一些片段来说明我正在谈论的内容。上一张是我目前正在做的，下一张是我想要的比例。

TabBar，因为我目前正在使用它

TabBar 正如我所希望的那样

如果窗口的宽度发生变化，项目的宽度也会调整以保持比例不变

这是我在 Flutter 中的代码

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,
        tabs: [
          Container(
              padding: EdgeInsets.symmetric(horizontal: 80.0),
              child: Tab(text: "Chats")),
          Container(child: Tab(text: "Me")),
        ]),
  ),
);

Answer 1

只需将属性isScrollable设置为true，并将横轴的labelPadding设置为0即可:

    @override
  Widget build(BuildContext context) {
    final double width = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).primaryColor,
        title: const Text("AppName"),
        elevation: 0.7,
        bottom: TabBar(
            controller: _tabController,
            indicatorColor: Theme.of(context).colorScheme.secondary,
            labelPadding: const EdgeInsets.symmetric(horizontal: 0),
            isScrollable: true,
            tabs: [
              Container(
                  width: width * 0.85,
                  color: Colors.orange,
                  // padding: const EdgeInsets.symmetric(horizontal: 80.0),
                  child: const Tab(text: "Chats")),
              Container(
                  width: width * 0.15,
                  color: Colors.red,
                  child: const Tab(text: "Me")),
            ]),
      ),
    );
  }

要在单击栏时更改宽度，定义一个初始化值为 true 的 bool，并用 (InkWell) 小部件包装两个容器，ontTap 将更改 bool 的值。您可以使用该 bool 值来更改容器的宽度:

InkWell(
  onTap: () {
     setState(() {
        b = true;
     });
  },
  child: Container(
     width: b? width * 0.85: width * 0.15,
     color: Colors.orange,
     child: const Tab(text: "Chats")),
  ),
InkWell(
  onTap: () {
     setState(() {
        b = false;
     });
  },
  child: Container(
     width: b? width * 0.15: width * 0.85,
     color: Colors.red,
     child: const Tab(text: "Me")),
),