在 Flutter 中为 TabView 添加选项卡标签答案

【问题标题】：Adding tab labels to TabView in Flutter在 Flutter 中为 TabView 添加选项卡标签
【发布时间】：2018-12-10 00:02:08
【问题描述】：

我正在尝试扩展作为答案here 提出的 TabView。

具体来说，我想要类别标签而不是灰点，并将与该类别对应的小部件作为选项卡内容加载。

我尝试按照文档进行操作，但如果我更改 AppBar 中的某些内容，它只会给我一个重新呈现错误。

【问题讨论】：

标签： android-studio dart flutter

【解决方案1】：

您可以通过DefaultTabController 小部件实现您想要的。您可以看到示例 here 只有图标。这是带有标题的修改版本。 TabBar 部分用于选项卡及其规格。 TabBarView 用于内部视图。

class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car), text: "Car",),
                Tab(icon: Icon(Icons.directions_transit), text: "Transit"),
                Tab(icon: Icon(Icons.directions_bike), text: "Bike",),
              ],
            ),
            title: Text('Tabs Demo'),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}

如果您使用上面的代码，您将获得一个带有解释性文本的 3 个选项卡式选项卡视图。

编辑：

//Call the widget as follows
new TabBarDemo(createTabsDynamically());

//method to use for dynamic creation.
List<Tab> createTabsDynamically() {

    List<String> titles = ["Car", "Transit", "Bike"];
    List<IconData> iconData = [Icons.directions_car, Icons.directions_transit, Icons.directions_bike];
    List<Tab> tabs = new List();
    // Assuming titles and icons have the same length
    for (int i = 0; i< titles.length; i++) {
      tabs.add(Tab(icon: Icon(iconData[i]), text: titles[i],));
    }

    return tabs;
}

class TabBarDemo extends StatelessWidget {

  List<Tab> tabs;
  TabBarDemo(this.tabs);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: tabs,
            ),
            title: Text('Tabs Demo'),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}

【讨论】：

感谢您的回答。我怎样才能动态地做到这一点？我有一个可变的类别数，所以对于每个类别我都需要一个标签。
首先你可以根据你的值创建你的标签，然后你可以用构造函数传递它。我编辑了我的代码，以便您了解它。

【解决方案2】：

您可以通过 TabController 小部件实现您想要的。我找到了一个简单的 TabBar 示例here。

【讨论】：