[英]Update a series of variable in SetState() efficiently (Dart-Flutter)
[英]Flutter/Dart: update some variables but not others when using setState()
我正在努力提高我對 Flutter 的理解,並且正在努力解決一個問題。 我正在嘗試創建一個應用程序,該應用程序顯示從列表中提取數據的卡片列表。 底部有一個按鈕,當用戶單擊它時會創建一個新卡。
我試圖讓每張卡顯示一個唯一的“輪數”。 因此,例如,每次用戶單擊按鈕時,都會添加一張卡片,在單詞“Round”旁邊顯示序列號。 第 1 輪 > 第 2 輪 > 第 3 輪等等。
現在一切正常,除了每次按下按鈕時,所有卡片都會更新為最新的數字。 因此,不是獲取連續的卡片列表,而是將每張卡片更新為最新的回合數。
我究竟做錯了什么? 謝謝你。
這是我的代碼:
import 'package:flutter/material.dart';
class Round {
int roundNumber;
int firstNumber;
int secondNumber;
Round({ this.roundNumber, this.firstNumber, this.secondNumber, });
}
int uid = 1;
List<Round> roundsList = [
Round(roundNumber: uid, firstNumber: 1, secondNumber: 2),
];
class createLevels extends StatefulWidget {
@override
_createLevelsState createState() => _createLevelsState();
}
class _createLevelsState extends State<createLevels> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text("Create Rounds",)
),
body: Padding(
padding: const EdgeInsets.fromLTRB(20, 20, 20.0, 20),
child: Container(
child: Column(
children: <Widget>[
Expanded(
child: ListView.builder(
itemCount: roundsList.length,
itemBuilder: (BuildContext context, int whatIsThisVariable) {
return roundCard(Round(roundNumber: uid, firstNumber: 2, secondNumber: 3,));
}
),
),
Text("$roundsList"),
RaisedButton(
onPressed: () {
uid++;
roundsList.add(Round(roundNumber: uid));
setState(() {});
},
child: Text("Add Round"),
),
],
),
),
),
);
}
}
class roundCard extends StatelessWidget {
final Round round;
roundCard(this.round);
// roundsList.add(Round(roundNumber: 1));
@override
Widget build(BuildContext context) {
return Container(
child: Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Spacer(
flex: 1,
),
Expanded(
child: Text('Round ${round.roundNumber}:'),
flex: 12,
),
Expanded(
child: TextFormField(
textAlign: TextAlign.center,
decoration: InputDecoration(
hintText: '${round.firstNumber}',
),
),
flex: 3,
),
Spacer(
flex: 1,
),
Expanded(
child: TextFormField(
textAlign: TextAlign.center,
decoration: InputDecoration(
hintText: '${round.secondNumber}',
),
),
flex: 3,
),
],
),
)
),
);
}
}
您可以在下面復制粘貼運行完整代碼
您需要傳遞index
而不是uid
您可以調整您想要的第一個和第二個數字
代碼片段
itemBuilder: (BuildContext context, int index) {
return roundCard(roundsList[index]);
}),
...
onPressed: () {
uid++;
firstNumber++;
secondNumber++;
roundsList.add(
Round(roundNumber: uid, firstNumber: firstNumber, secondNumber: secondNumber));
setState(() {});
}
工作演示
完整代碼
import 'package:flutter/material.dart';
class Round {
int roundNumber;
int firstNumber;
int secondNumber;
Round({
this.roundNumber,
this.firstNumber,
this.secondNumber,
});
}
int uid = 1;
int firstNumber = 2;
int secondNumber = 3;
List<Round> roundsList = [
Round(roundNumber: uid, firstNumber: 1, secondNumber: 2),
];
class createLevels extends StatefulWidget {
@override
_createLevelsState createState() => _createLevelsState();
}
class _createLevelsState extends State<createLevels> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text(
"Create Rounds",
)),
body: Padding(
padding: const EdgeInsets.fromLTRB(20, 20, 20.0, 20),
child: Container(
child: Column(
children: <Widget>[
Expanded(
child: ListView.builder(
itemCount: roundsList.length,
itemBuilder: (BuildContext context, int index) {
return roundCard(roundsList[index]);
}),
),
Text("$roundsList"),
RaisedButton(
onPressed: () {
uid++;
firstNumber++;
secondNumber++;
roundsList.add(
Round(roundNumber: uid, firstNumber: firstNumber, secondNumber: secondNumber));
setState(() {});
},
child: Text("Add Round"),
),
],
),
),
),
);
}
}
class roundCard extends StatelessWidget {
final Round round;
roundCard(this.round);
// roundsList.add(Round(roundNumber: 1));
@override
Widget build(BuildContext context) {
return Container(
child: Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Spacer(
flex: 1,
),
Expanded(
child: Text('Round ${round.roundNumber}:'),
flex: 12,
),
Expanded(
child: TextFormField(
textAlign: TextAlign.center,
decoration: InputDecoration(
hintText: '${round.firstNumber}',
),
),
flex: 3,
),
Spacer(
flex: 1,
),
Expanded(
child: TextFormField(
textAlign: TextAlign.center,
decoration: InputDecoration(
hintText: '${round.secondNumber}',
),
),
flex: 3,
),
],
),
)),
);
}
}
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: createLevels(),
);
}
}
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;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.