如何在listview.builder Flutter中的卡片小部件中更新按钮点击的特定值

Question

我正在构建一个listview.builder，它返回5个(动态而非静态)card小部件，其中包含两个buttons和计数text小部件。问题是，每当我单击第一个card小部件上的-或+按钮时，它都会在所有cards上更新。如何防止这个问题，我只想在第一个card小部件上更新count文本。我知道它在listview.builder内部，但有什么解决方案可以解决这个问题吗。

class MenuCartWidget extends StatefulWidget {
const MenuCartWidget({Key? key}) : super(key: key);
@override
_MenuCartWidgetState createState() => _MenuCartWidgetState();
}
class _MenuCartWidgetState extends State<MenuCartWidget> {
int count = 1;
@override
Widget build(BuildContext context) {
var height = MediaQuery.of(context).size.height;
var width = MediaQuery.of(context).size.width;
return Scaffold(
body: Container(
child: Padding(
padding: const EdgeInsets.only(top: 20.0, left: 10.0, right: 10.0),
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemCount: 5, //dynamic eg: num.length;
itemBuilder: (BuildContext context, int index) {
return Card(
child: Column(
children: [
Text('test'),
Row(
children: [
TextButton(
onPressed: () {
setState(() {
count--;
});
},
child: Text('-')),
Text(count.toString()),
TextButton(
onPressed: () {
setState(() {
count++;
});
},
child: Text('+')),
],
)
],
),
);
}),
),
),
);
}
}

Answer 1

class MenuCartWidget extends StatefulWidget {
const MenuCartWidget({Key? key}) : super(key: key);

@override
_MenuCartWidgetState createState() => _MenuCartWidgetState();
}

class _MenuCartWidgetState extends State<MenuCartWidget> {
//int count = 1;
//List items = [1,1,1,1,1];
List items = [];
@override 
void initState() { 
super.initState(); 
for(int i=0;i<itemCount.length;i++){ 
items.add(1); 
} 
}
@override
Widget build(BuildContext context) {
var height = MediaQuery.of(context).size.height;
var width = MediaQuery.of(context).size.width;
return Scaffold(
body: Container(
child: Padding(
padding: const EdgeInsets.only(top: 20.0, left: 10.0, right: 10.0),
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemCount: items.length,
itemBuilder: (BuildContext context, int index) {
return Card(
child: Column(
children: [
Text('test'),
Row(
children: [
TextButton(
onPressed: () {
items[index]--;
setState(() {
//count--;
items;
});
},
child: Text('-')),
Text(items[index].toString()),
TextButton(
onPressed: () {
items[index]++;
setState(() {
//count++;
items;
});
},
child: Text('+')),
],
)
],
),
);
}),
),
),
);
}
}

Answer 2

也许我认为我们可以做到这一点。

import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: const MenuCartWidget(),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text(
'Hello, World!',
style: Theme.of(context).textTheme.headline4,
);
}
}
class MenuCartWidget extends StatefulWidget {
const MenuCartWidget({Key? key}) : super(key: key);
@override
_MenuCartWidgetState createState() => _MenuCartWidgetState();
}
class _MenuCartWidgetState extends State<MenuCartWidget> {
int count = 1;
int selectedIndex = -1;
var listValues = [
["test1", 0],
["test2", 0],
["test3", 0],
["test4", 0],
["test5", 0]
];
List<int> counterList = [];
@override
void initState() {
for (int i = 0; i < listValues.length; i++) {
counterList.add(listValues[i][1] as int);
}
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.only(top: 20.0, left: 10.0, right: 10.0),
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemCount: listValues.length,
itemBuilder: (BuildContext context, int index) {
return SingleChildScrollView(
child: Card(
child: Column(
children: [
Text(listValues[index][0].toString()),
Row(
children: [
TextButton(
onPressed: () {
setState(() {
counterList[index]--;
listValues[index][1] = counterList[index];
});
},
child: const Text('-')),
Text(listValues[index][1].toString()),
TextButton(
onPressed: () {
setState(() {
counterList[index]++;
listValues[index][1] = counterList[index];
});
},
child: const Text('+')),
],
)
],
),
),
);
}),
)),
);
}
}