Flutter TabBar TabBarView

最新推荐文章于 2025-05-07 10:00:00 发布

jiahua123_dongzhou

最新推荐文章于 2025-05-07 10:00:00 发布

阅读量494

点赞数

分类专栏： fflutter组件

本文链接：https://blog.youkuaiyun.com/jiahua123_dongzhou/article/details/108412375

版权

本文详细介绍了Flutter中的TabBar和TabBarView组件的使用，包括它们的定义、属性以及如何在AppBar中集成TabBar。通过示例代码展示了TabBarView的属性和效果，强调了DefaultTabController中的关键属性。

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

Flutter TabBar TabBarView

Flutter 系列文章总体目录

TabBar 是一排水平的标签，可以来回切换，效果图：
在这里插入图片描述

属性	说明
tabs	一系列标签控件
controller	标签选择变化控制器
isScrollable	是否可滚动，默认false
indicatorColor	指示器颜色
indicatorWeight	指示器粗细
indicator	指示器，可自定义形状等样式
indicatorSize	指示器长短，tab：和tab一样长，label：和标签label 一样长
labelColor	标签颜色
labelStyle	标签样式
labelPadding	标签padding
unselectedLabelColor	未选中标签颜色
unselectedLabelStyle	未选中标签样式

TabBar 一般情况下和TabBarView一起使用，TabBarView用于选择不同的TabBar，TabBarView显示对应的View
TabBarView属性说明：


children	一系列子控件，如果和TabBar一起使用注意和TabBar的长度一样
controller	控制器，如果和TabBar一起使用注意和TabBar使用同一个controller

使用：

import 'package:flutter/material.dart';

class TabBarDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _TabBar();
}

class _TabBar extends State<TabBarDemo> {
  final List<String> _tabValues = [
    '语文',
    '英语',
    '化学',
    '物理',
    '数学

最低0.47元/天解锁文章