Flutter 应用之TabBar

最新推荐文章于 2024-07-15 11:59:01 发布

林序

最新推荐文章于 2024-07-15 11:59:01 发布

阅读量3.8k

点赞数

分类专栏： Futter 文章标签： Flutter TabBar Flutter 选项卡

本文链接：https://blog.youkuaiyun.com/lin962792501/article/details/83109304

版权

Futter 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了在Flutter开发中如何使用TabBar进行选项卡切换。通过DefaultTabController和自定义TabController两种方式，配合MaterialApp、Scaffold、TabBar和TabBarView组件，实现选项卡内容的同步显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文记录Flutter开发的TabBar使用。 TabBar是选项切换页的意思，在android中通常是使用ViewPage来实现。在Flutter中，TabBar是被定义在Material Component中，所以他的使用需要在MaterialApp中。

为了让TabBar能正常使用，需要保持选项卡和内容同步，这个工作是由TabController来完成的。可以手动创建一个TabController，也可以使用默认的 DefaultTabController部件。

一、使用DefaultController

new MaterialApp(
      home: new DefaultTabController(length: 3, child: new Scaffold(
        appBar: new AppBar(
          title: new Text('DefaultTabController'),
          bottom: new TabBar(tabs: <Widget>[
            new Tab(text: '1'),
            new Tab(text: '2'),
            new Tab(text: '3'),
          ]),
        ),
        body: new TabBarView(children: <Widget>[
          new Icon(Icons.more),
          new Icon(Icons.more),
          new Icon(Icons.more),
        ]),
      )),
    );

二、使用自定义的TabController

class _MyTabBarState extends State<MyTabBar>
    with SingleTickerProviderStateMixin {
  var _tabController;

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

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("TabBar"),
          elevation: 0.7,
          bottom: new TabBar(
            controller: _tabController,
            indicator: new UnderlineTabIndicator(),
            tabs: <Widget>[
              new Tab(
                icon: new Icon(Icons.camera_alt),
              ),
              new Tab(
                text: "CHATS",
              ),
              new Tab(
                text: "STATUS",
              ),
              new Tab(
                text: "CALLS",
              ),
            ],
          ),
        ),
        body: new TabBarView(controller: _tabController, children: <Widget>[
          new Center(),
          new Center(),
          new Center(),
          new Center(),
        ]));
  }
}

代码都很简单，可以看到他们都使用到了MaterialApp，Scaffold，TabBar，TabBarView。