在质感设计的控件中，有一个显示水平的一行选项卡，通常作为AppBar控件的一部分创建，并与TabBarView控件结合使用。
|
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
import 'package:flutter/material.dart';/* * 枚举类，标签演示样式 * 图标和文本 * 仅图标 * 仅文本 */enum TabsDemoStyle { iconsAndText, iconsOnly, textOnly}/* * 页面类 * 图标 * 文本 */class _Page { _Page({ this.icon, this.text, }); final IconData icon; final String text;}// 存储所有页面的列表final List<_Page> _allPages = <_Page>[ new _Page(icon: Icons.event, text: 'EVENT'), new _Page(icon: Icons.home, text: 'HOME'), new _Page(icon: Icons.android, text: 'ANDROID'), new _Page(icon: Icons.alarm, text: 'ALARM'), new _Page(icon: Icons.face, text: 'FACE'), new _Page(icon: Icons.language, text: 'LANGUAGE'),];class ScrollableTabsDemo extends StatefulWidget { @override _ScrollableTabsDemoState createState() => new _ScrollableTabsDemoState();}// 继承SingleTickerProviderStateMixin，提供单个Ticker（每个动画帧调用它的回调一次）class _ScrollableTabsDemoState extends State<ScrollableTabsDemo> with SingleTickerProviderStateMixin { /* * 在TabBar和TabBarView之间的坐标选项卡选择 * TabBar：质感设计控件，显示水平的一行选项卡 * TabBarView：可分布列表，显示与当前所选标签对应的控件 */ TabController _controller; TabsDemoStyle _demoStyle = TabsDemoStyle.iconsAndText; @override void initState() { super.initState(); /* * 创建一个对象，用于管理TabBar和TabBarView所需的状态 * length：选项卡的总数，存储所有页面的列表中的元素个数 */ _controller = new TabController(vsync: this, length: _allPages.length); } // 释放对象使用的资源 @override void dispose() { super.dispose(); _controller.dispose(); } void changeDemoStyle(TabsDemoStyle style) { setState((){ _demoStyle = style; }); } @override Widget build(BuildContext context) { // 获取当前主题的控件前景色 final Color iconColor = Theme.of(context).accentColor; return new Scaffold( appBar: new AppBar( title: new Text('可滚动的标签页'), actions: <Widget>[ new PopupMenuButton<TabsDemoStyle>( onSelected: changeDemoStyle, itemBuilder: (BuildContext context) => <PopupMenuItem<TabsDemoStyle>>[ new PopupMenuItem<TabsDemoStyle>( value: TabsDemoStyle.iconsAndText, child: new Text('图标和文本') ), new PopupMenuItem<TabsDemoStyle>( value: TabsDemoStyle.iconsOnly, child: new Text('仅图标') ), new PopupMenuItem<TabsDemoStyle>( value: TabsDemoStyle.textOnly, child: new Text('仅文本') ) ] ), ], bottom: new TabBar( // 控件的选择和动画状态 controller: _controller, // 标签栏是否可以水平滚动 isScrollable: true, // 标签控件的列表 tabs: _allPages.map((_Page page){ switch(_demoStyle) { case TabsDemoStyle.iconsAndText: return new Tab(text: page.text, icon: new Icon(page.icon)); case TabsDemoStyle.iconsOnly: return new Tab(icon: new Icon(page.icon)); case TabsDemoStyle.textOnly: return new Tab(text: page.text); } }).toList(), ), ), body: new TabBarView( // 控件的选择和动画状态 controller: _controller, // 每个标签一个控件 children: _allPages.map((_Page page) { return new Container( key: new ObjectKey(page.icon), padding: const EdgeInsets.all(12.0), // 质感设计卡片 child:new Card( child: new Center( child: new Icon( page.icon, color: iconColor, size: 128.0, ) ) ) ); }).toList(), ) ); }}void main() { runApp(new MaterialApp( title: 'Flutter教程', home: new ScrollableTabsDemo(), ));} |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/hekaiyou/article/details/54709633
