flutter DefaultTabController

最新推荐文章于 2024-06-19 09:32:06 发布

涂文远

最新推荐文章于 2024-06-19 09:32:06 发布

阅读量4.8k

点赞数

分类专栏： Flutter 文章标签： flutter

本文链接：https://blog.csdn.net/daividtu/article/details/107101812

版权

Flutter 专栏收录该内容

10 篇文章

订阅专栏

本文将介绍如何在Flutter中使用DefaultTabController实现标签切换功能，通过示例代码展示其具体实现过程，帮助开发者理解其工作原理。

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

效果

实现代码

import 'package:flutter/material.dart';

void main(){
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    title: '测试程序',
    theme: ThemeData(primaryColor: Colors.greenAccent),
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  List<String> _tabTitles = ['@我','评论','私信'];
  @override
  Widget build(BuildContext context) {
    return Container(
      child: DefaultTabController(
        length: _tabTitles.length,
        child: Scaffold(
          appBar: AppBar(
            elevation: 0,
            title: Text('消息中心',style: TextStyle(color: Color(0xffffffff)),),
            centerTitle: true,
            bottom: PreferredSize(
                child: Material(
                  color: Colors.blue,
                  child: TabBar(
                    indicatorColor: Colors.red,
                    labelColor: Colors.red,
                    unselectedLabelColor: Colors.yellow,
                    tabs: _tabTitles.map((title) => Tab(
                      text: title,
                    )).toList(),
                  ),
                ),
                preferredSize: Size.fromHeight(48)),
          ),
          body: TabBarView(
              children: [
                Center(
                  child: Text('@我'),
                ),
                Center(
                  child: Text('评论'),
                ),
                Center(
                  child: Text('私信'),
                ),
              ]
          ),
        ),
      ),
    );
  }
}