在Flutter中,我有一些用于制表符的基本代码。
main.dart
import 'package:flutter/material.dart';
import './tab.dart' as tab;
void main(){
runApp(new MaterialApp(
home: new Tabs()
));
}
class Tabs extends StatefulWidget {
@override
TabsState createState() => new TabsState();
}
class TabsState extends State<Tabs> with SingleTickerProviderStateMixin {
TabController controller;
@override
void initState() {
super.initState();
controller = new TabController(vsync: this, length: 4);
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Pages"),
backgroundColor: Colors.deepOrange
),
bottomNavigationBar: new Material(
color: Colors.deepOrange,
child: new TabBar(
controller: controller,
tabs: <Tab>[
new Tab(icon: new Icon(Icons.trending_up)),
new Tab(icon: new Icon(Icons.announcement)),
new Tab(icon: new Icon(Icons.more_horiz)),
]
)
),
body: new TabBarView(
controller: controller,
children: <Widget>[
new tab.Tab(),
new tab.Tab(),
new tab.Tab(),
]
)
);
}
}
tab.dart
import 'package:flutter/material.dart';
class Tab extends StatefulWidget {
@override
TabState createState() => new TabState();
}
class TabState extends State<Tab> with AutomaticKeepAliveClientMixin<Tab> {
@override
bool get wantKeepAlive => true;
updateKeepAlive();
double _val = 100;
void _incVal() {
setState(() {
_val+=10;
});
}
Widget build(BuildContext context) {
super.build(context);
return new Container(
child: new Center(
child: new FlatButton(
onPressed: _incVal,
child: new Icon(Icons.accessibility_new, size: _val, color: Colors.orange)
)
)
);
}
}
此应用仅具有3个标签。每个页面都相同。每页上都有一个图标,点击该图标应会增加。正如我使用的AutomaticKeepAliveClientMixin
一样,切换选项卡时图标的大小应保持不变,除了一种情况,情况就是如此。
切换到第二个(中间)页面,然后点击几次图标使其增大。然后切换到第一页,然后是第三页,然后再回到第二页,第二页上的图标将恢复为默认大小,而不是保持原样。
这是一个非常简单的示例,但仅说明了问题所在。