Flutter Widget 之DefaultTabContoller & TabBar

您需要将widget置入标签页吗？那么，您可以选用DefaultTabController TabBar和TabBarView widget

要使用标签页，您首先需要一个标签页控制器，将选定的标签页和课件内容保持同步化，最简单的方法是使用DefaultTabController

return MaterialApp(
    home: DefaultTabController(
        length: 3,
        child: Scaffold(
            //...
        )
    ),
);

一旦您又了这个东西，您将需要一个能够显示用户在标签页之间切换不同内容的widget，

这个阶段，您可以使用TabBar，TabBar接收标签页widget的列表,您可以使标签页显示文本内容、图标或指定的自窗口widget

Scaffold(
    appBar: AppBar(
        bottom: TabBar(
            tabs: [
               Tab(text: "Cat"),
               Tab(text: "Dog"),
               Tab(text: "Rabbit"),
            ],
        ),
    ),
    //...
)

最后，您需要为每个标签页创建内容,在这个阶段，您可以使用TabBarView.

子项目所列出的每一个widget都对应TabBar中的标签页

TabBarView(
    children: [
        Image(image: AssetImage('assets/cat.jpg')),
        Image(image: AssetImage('assets/dog.jpg')),
        Image(image: AssetImage('assets/rabbit.jpg')),
    ],
)

标签页和TabView的子项目之间必须一对一进行匹配

如果想了解有关DefaultTabContoller & TabBar的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址