以下是一个简单的代码(在 main.dart 中),我试图用它来重温几个月前我正在做的 flutter 基础知识。
这里,在下面的代码中,setState() 没有按预期工作,原因是状态错误。
我可以通过创建单独的 statefulwidget withs 状态来使它可用,这些状态构成以下用于按钮和文本更改的元素。
但在这里我想知道是否可以通过对以下代码进行最少的更改来匿名完成此操作
import 'package:flutter/material.dart';
var textStrings = ["Hello", "Hi", "Hey", "Aloha"];
var counter = 0;
void main() => runApp(MaterialApp(
title: "Hello",
home: Scaffold(
appBar: AppBar(
title: Text(
"First App",
style: TextStyle(
color: Colors.white70,
fontSize: 20,
fontStyle: FontStyle.normal),
),
),
body: Container(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Padding(padding: EdgeInsets.only(top: 20)),
Card(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Padding(padding: EdgeInsets.only(bottom: 20)),
Center(
child: Text("With Flutter, Spread Fluttery",
style: TextStyle(
color: Colors.redAccent,
fontStyle: FontStyle.italic,
fontSize: 30)),
),
Padding(padding: EdgeInsets.only(bottom: 20)),
Icon(
Icons.refresh,
size: 50,
color: Colors.amberAccent,
),
Padding(padding: EdgeInsets.only(bottom: 20)),
Text(textStrings[counter % 4],
style: TextStyle(
color: Colors.black38,
fontSize: 30,
fontStyle: FontStyle.normal)),
Padding(padding: EdgeInsets.only(bottom: 20)),
RaisedButton(
onPressed: () {
setState() {
counter++;
}
},
child: Text("Enter",
style: TextStyle(
color: Colors.teal,
fontSize: 30,
)),
)
],
),
)
],
),
),
),
),
));
最佳答案
当然你可以添加几行代码,你可以使用StatefulBuilder
。
将容器包装在 StatefulBuilder
中,并在按钮的 onPressed
方法中更改 setState(() {} )
。
void main() => runApp(MaterialApp(
title: "Hello",
home: Scaffold(
appBar: AppBar(
title: Text(
"First App",
style: TextStyle(
color: Colors.white70,
fontSize: 20,
fontStyle: FontStyle.normal),
),
),
body: StatefulBuilder(
builder: (context, setState) {
return Container(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Padding(padding: EdgeInsets.only(top: 20)),
Card(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Padding(padding: EdgeInsets.only(bottom: 20)),
Center(
child: Text("With Flutter, Spread Fluttery",
style: TextStyle(
color: Colors.redAccent,
fontStyle: FontStyle.italic,
fontSize: 30)),
),
Padding(padding: EdgeInsets.only(bottom: 20)),
Icon(
Icons.refresh,
size: 50,
color: Colors.amberAccent,
),
Padding(padding: EdgeInsets.only(bottom: 20)),
Text(textStrings[counter % 4],
style: TextStyle(
color: Colors.black38,
fontSize: 30,
fontStyle: FontStyle.normal)),
Padding(padding: EdgeInsets.only(bottom: 20)),
RaisedButton(
onPressed: () {
setState(() {
counter++;
});
},
child: Text("Enter : $counter",
style: TextStyle(
color: Colors.teal,
fontSize: 30,
)),
)
],
),
)
],
),
),
);
},
)),
));
关于dart - Flutter 有状态小部件 - 单击按钮时保存状态的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53927341/