Flutter动态添加TabBarView

原理:动态更新TabController状态

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

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

class _DynamicTabBarViewState extends State<DynamicTabBarViewPage>
with TickerProviderStateMixin {
List<DynamicTabContent> myList = new List();
TabController _cardController;
TabPageSelector _tabPageSelector;

@override
void initState() {
super.initState();
myList.add(new DynamicTabContent.name(Icons.favorite, "Favorited"));
myList.add(new DynamicTabContent.name(Icons.email, "Email"));

_cardController = new TabController(vsync: this, length: myList.length);
_tabPageSelector = new TabPageSelector(controller: _cardController);
}

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

Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: new Text('Dynamic TabBarView'),
actions: <Widget>[
Padding(
padding: const EdgeInsets.all(1.0),
child: new IconButton(
icon: const Icon(
Icons.add,
size: 30.0,
color: Colors.white,
),
tooltip: 'Add Tabs',
onPressed: () {
List<DynamicTabContent> tempList = new List();

myList.forEach((dynamicContent) {
tempList.add(dynamicContent);
});

setState(() {
myList.clear();
});

if (tempList.length % 2 == 0) {
myList.add(new DynamicTabContent.name(Icons.shopping_cart, "shopping cart"));
} else {
myList.add(new DynamicTabContent.name(Icons.camera, "camera"));
}

tempList.forEach((dynamicContent) {
myList.add(dynamicContent);
});

setState(() {
_cardController = new TabController(vsync: this, length: myList.length);
_tabPageSelector = new TabPageSelector(controller: _cardController);
});
},
),
),
],
bottom: new PreferredSize(
preferredSize: const Size.fromHeight(10.0),
child: new Theme(
data: Theme.of(context).copyWith(accentColor: Colors.white),
child: myList.isEmpty
? new Container(
height: 30.0,
)
: new Container(
height: 30.0,
alignment: Alignment.center,
child: _tabPageSelector,
),
),
),
),
body: TabBarView(
controller: _cardController,
children: myList.isEmpty
? <Widget>[]
: myList.map((dynamicContent) {
return new Card(
child: new Container(
height: 450.0,
width: 300.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
IconButton(
iconSize: 100.0,
icon: new Icon(dynamicContent.icon),
tooltip: dynamicContent.tooTip,
onPressed: null,
),
Text(
'http://www.appblog.cn'
)
],
)
),
);
}).toList(),
),
);
}
}

class DynamicTabContent {
IconData icon;
String tooTip;

DynamicTabContent.name(this.icon, this.tooTip);
}

Flutter DynamicTabBarView

Powered by AppBlog.CN     浙ICP备14037229号

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

访客数 : | 访问量 :