flutter TabBar 滚动(不常用，一般用tabbarcontrol)

xcode_androidstudio

于 2021-11-16 14:38:53 发布

阅读量2.6k

点赞数

分类专栏： Flutter 文章标签： flutter html android studio

本文链接：https://blog.youkuaiyun.com/u014029960/article/details/121355639

版权

Flutter 专栏收录该内容

2 篇文章

订阅专栏

本文展示了如何使用Flutter的DefaultTabController实现两个界面的切换，包括TabBar的自定义样式和ListView的内容展示。通过TabBarView，用户可以轻松在'第一个界面'和'第二个界面'间切换，浮动按钮提供了返回操作。

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

@override
Widget build(BuildContext context) {
  return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: TabBar(

            isScrollable: true,
            indicatorColor:  Colors.red,
            labelColor: Colors.red,
            unselectedLabelColor: Colors.white,
            indicatorSize: TabBarIndicatorSize.label,
            tabs: [
              Tab(
                text: '第一个界面',
              ),
              Tab(
                text: '第二个界面',
              )
            ],
          ),
        ),
        body: TabBarView(children: [
          ListView(
            children: [
              ListTile(
                title: Text('第1个界面'),
              ),
              ListTile(
                title: Text('第1个界面'),
              ),
              ListTile(
                title: Text('第1个界面'),
              ),
            ],
          ),
          ListView(
            children: [
              ListTile(
                title: Text('第2个界面'),
              ),
              ListTile(
                title: Text('第2个界面'),
              ),
              ListTile(
                title: Text('第2个界面'),
              ),
            ],
          )
        ]),
        floatingActionButton: FloatingActionButton(
          child: Text('返回'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ));
}