我正在使用带有类似子小部件的底部导航,其中仅更改了参数。只有当小部件属于 StatefulWidget 时才会出现问题,否则没有问题,底部导航栏中的指示正在改变,但正文没有改变。
child 1:
child 2:
实际结果:
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
Widget body;
@override
void initState() {
// body = getBody(0);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
elevation: 0,
),
body: body,
bottomNavigationBar: BottomNavigationBar(
currentIndex: _counter,
onTap: (index){
_counter = index;
setState(() {
body = getBody(index);
});
},items: [
BottomNavigationBarItem(icon: Icon(Icons.language),title:
Text('HELLO')),
BottomNavigationBarItem(icon: Icon(Icons.security),title:
Text('BYE'))
]),
);
}
Widget getBody(int pos){
if(pos==0){
// return new Mx(category: 'ALPHA',type: '@',);
return new MyTAbs(category: 'ALPHA',type: '@',);
}
else{
// return new Mx(category:'BETA',type: '#',);
return new MyTAbs(category:'BETA',type: '#',);
}
}
}
class Mx extends StatelessWidget{
final String type,category;
Mx({this.type,this.category});
@override
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: getColor(),
body: new Center(
child: Text(category+' '+type),
),
);
}
Color getColor(){
if(category=='ALPHA'){
return Colors.red;
}
else{
return Colors.green;
}
}
}
class MyTAbs extends StatefulWidget{
final String type,category;
MyTAbs({this.type,this.category});
Tabs createState() => new Tabs(title: category,type: type);
}
class Tabs extends State<MyTAbs>{
final String title,type;
Tabs({this.title,this.type});
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
backgroundColor: getColor(),
appBar: AppBar(
title: Text(title+' '+type),
),
);
}
Color getColor(){
if(title=='ALPHA'){
return Colors.red;
}
else{
return Colors.green;
}
}
}
我不能使用 statelessWidget,因为里面有一个动态选项卡部分。
最佳答案
通过添加新的 Key 作为参数并传递 UniqueKey 解决了这个问题 喜欢
return new MyTAbs(category: 'ALPHA',type: '@',key: UniqueKey(),);
MyTAbs 类
class MyTAbs extends StatefulWidget{
final String type,category;
final Key key;
MyTAbs({@required this.key,this.type,this.category});
Tabs createState() => new Tabs(title: category,type: type,key: key);
}
标签类
class Tabs extends State<MyTAbs>{
final String title,type;
final Key key;
Tabs({this.title,this.type,@required this.key});
@override
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
backgroundColor: getColor(),
appBar: AppBar(
title: Text(title+' '+type),
),
);
}
Color getColor(){
if(title=='ALPHA'){
return Colors.red;
}
else{
return Colors.green;
}
}
}
key
当小部件重建时,您可以使用键来控制框架与其他小部件匹配的小部件。默认情况下,框架会根据它们的 runtimeType 和它们出现的顺序来匹配当前和先前构建中的小部件。对于键,框架要求两个小部件具有相同的键以及相同的 runtimeType。 more in flutter docs
https://stackoverflow.com/questions/55237188/
相关文章:
dart - 如何创建 "fake" Dart :io File from in-memory by
android - Flutter 在 iOS 设备上出现 'Error connecting to
flutter - 更新 Flutter 后 StaggeredGridView 不滚动
dart - Flutter 从 StatefulWidget 对象更改状态
flutter - Flutter 支持虚拟现实还是增强现实?
android - Flutter 项目超过 .dex 方法引用计数限制
flutter - 访问facebook登录时出现错误如何解决