在 Flutter 中为 TabView 添加标签标签 [英] Adding tab labels to TabView in Flutter

问题描述

我正在尝试扩展作为答案提出的 TabView 这里.

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

I'm trying to extend the TabView proposed as an answer here.

Specifically, instead of the grey dots, I would like to have category labels, and load as a tab content a widget corresponding to that category.

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

I tried following the docs, but if I change something in the AppBar it just gives me a reendering error.

推荐答案

您可以通过 DefaultTabController 小部件实现您想要的.您可以在此处查看示例，仅包含图标.这是带有标题的修改版本.TabBar 部分用于选项卡及其规范.TabBarView 用于内部视图.

You can achieve what you wanted via DefaultTabController widget. You can see the example here with only the icons. And here is the modified version of it with titles. TabBar part is for the tab and it's specifications. TabBarView is for the interior view.

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 选项卡式选项卡视图.

If you use the code above, you would be getting a 3 tabbed tab view with the explanatory text.

//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),
            ],
          ),
        ),
      ),
    );
  }
}

这篇关于在 Flutter 中为 TabView 添加标签标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！