flutter DefaultTabController

最新推荐文章于 2025-03-05 18:18:53 发布

原创最新推荐文章于 2025-03-05 18:18:53 发布 · 4.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

Flutter 专栏收录该内容

10 篇文章

订阅专栏

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

效果

实现代码

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('私信'),
                ),
              ]
          ),
        ),
      ),
    );
  }
}