Flutter Widget之TabBar与TabBarView

Widget:https://flutter.io/docs/development/ui/widgets
TabBar:https://docs.flutter.io/flutter/material/TabBar-class.html
TabBarView:https://docs.flutter.io/flutter/material/TabBarView-class.html

TabBar是选项切换页的意思,在Android中通常是使用ViewPage来实现。在Flutter中,TabBar是被定义在Material Component中,所以需要在MaterialApp中使用。

为了让TabBar能正常使用,需要保持选项卡和内容同步,这个工作是由TabController来完成的。可以手动创建一个TabController,也可以使用默认的 DefaultTabController部件。

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
import 'package:flutter/material.dart';

class TabBarDemoPage extends StatefulWidget {
@override
State<StatefulWidget> createState() => new _TabBarDemoPageState();
}

class _TabBarDemoPageState extends State<TabBarDemoPage> with SingleTickerProviderStateMixin {
var _tabController;

@override
void initState() {
super.initState();
_tabController = new TabController(length: 6, vsync: this);
}

Widget build(BuildContext context) {
/*
return new DefaultTabController(
length: 3,
child: new Scaffold(
appBar: new AppBar(
title: new Text('DefaultTabController'),
bottom: new TabBar(tabs: <Widget>[
new Tab(text: 'Tab 1'),
new Tab(text: 'Tab 2'),
new Tab(text: 'Tab 3'),
]),
),
body: new TabBarView(children: <Widget>[
new Center(child: new Text('First Page'),),
new Center(child: new Icon(Icons.android),),
new Center(child: new Text('Third Page'),),
]),
)
);
*/
return Scaffold(
appBar: new AppBar(
title: new Text("TabBar"),
elevation: 0.7,
bottom: new TabBar(
controller: _tabController,
indicator: new UnderlineTabIndicator(),
tabs: <Widget>[
new Tab(
icon: new Icon(Icons.camera_alt),
),
new Tab(
text: "CHATS",
),
new Tab(
text: "STATUS",
),
new Tab(
text: "CALLS",
),
],
),
),
body: new TabBarView(controller: _tabController, children: <Widget>[
new Center(),
new Center(),
new Center(),
new Center(),
])
);
}
}

Flutter Widget DefaultTabController

Flutter Widget TabBar

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :