Flutter TabBarView组件

Flutter TabBarView组件

简述

TabBarView 是 Material 组件库中提供了 Tab 布局组件，通常和 TabBar 配合使用。

TabBarView封装了PageView，使用起来非常简单。

基本属性

TabBarView

controller：TabBarView控制器。

children：子元素。
1
2
3

TabBar

tabs	一系列标签控件

controller	标签选择变化控制器

isScrollable	是否可滚动，默认false

indicatorColor	指示器颜色

indicatorWeight	指示器粗细

indicator	指示器，可自定义形状等样式

indicatorSize	指示器长短，tab：和tab一样长，label：和标签label 一样长

labelColor	标签颜色

labelStyle	标签样式

labelPadding	标签padding

unselectedLabelColor	未选中标签颜色

unselectedLabelStyle	未选中标签样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

简单使用

class TabBarViewPage extends StatefulWidget {
    const TabBarViewPage({Key? key}) : super(key: key);

    @override
    State<StatefulWidget> createState() {
        return _TabBarViewPageState();
    }
}

class _TabBarViewPageState extends State<TabBarViewPage> with SingleTickerProviderStateMixin {
    final List tabs = ["One", "Two", "Three", "Four", "Five", "Six", "Seven"];
    late TabController _controller;

    @override
    void initState() {
        _controller = TabController(length: tabs.length, vsync: this);
        super.initState();
    }

    @override
    void dispose() {
        _controller.dispose();
        super.dispose();
    }

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: const Text("TabBarView & PageView"),
                bottom: TabBar(
                    indicatorColor: Colors.red,
                    controller: _controller,
                    isScrollable: true,
                    tabs: tabs.map((e) {
                        return Tab(text: e);
                    }).toList(),
                ),
            ),
            body: TabBarView(
                dragStartBehavior: DragStartBehavior.down,
                controller: _controller,
                children: tabs.map((e) {
                    return Container(
                        alignment: Alignment.center,
                        child: Text(e, textScaleFactor: 3),
                    );
                }).toList(),
            ),
        );
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52