如何在Flutter的列表视图中递增和递减单个项目? [英] How to Increment and Decrements single item in a List View in Flutter?
本文介绍了如何在Flutter的列表视图中递增和递减单个项目?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在我的产品屏幕上，我有两个按钮+和-用于数量，我的ListView中的这两个按钮递增/递减整个列表，我想在单击单个列表项的按钮时增加或减少数量.如果我增加或减少计数器，它将在每个列表项中增加.
In my products Screen I have two buttons + and - for quantity, these two buttons in my ListView it Increment/Decrement the whole list , I want to increment or decrement quantity upon button click for single list item. If I increase or decrease the counter it increment in every list item.
StreamController _event =StreamController<int>.broadcast();
int _counter = 0;
void initState() {
super.initState();
_event.add(0);
}
@override
Widget build(BuildContext context) {
.
.
return Scaffold(
body: allItemsFlowlist(),
);
}
Widget allItemsFlowlist(){
return Container(
child: ListView.builder(
itemCount: items.documents.length,
physics: AlwaysScrollableScrollPhysics(parent: BouncingScrollPhysics()),
itemBuilder: (context, i) {
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Flexible(
flex: 3,
child: Row(
children: <Widget>[
Flexible(
flex: 4,
child: Container(
child: Row(
children: <Widget>[
Container(
width: 35,
height: 35,
decoration: BoxDecoration(
color: colorPallet('vprice_sectionIncrementerBackground'),
borderRadius: BorderRadius.circular(5),
),
child: IconButton(
icon: Icon(Icons.remove),
onPressed: _decrementCounter,
iconSize: 18,
color: colorPallet('vprice_sectionDecrementerBackground')
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 16.0),
child: Container(
width: 35,
height: 35,
decoration: BoxDecoration(
border: Border.all(
color: colorPallet('vprice_sectionIncrementerBackground'), //Color(0xFFFFD500),
width: 2,
),
borderRadius: BorderRadius.circular(5),
),
child: Center(
child: StreamBuilder<int>(
stream: _event.stream,
builder: (context, snapshot) {
return Text(
_counter.toString(),
style: TextStyle(
color: colorPallet('vprice_sectionTextTextStyle4'),
fontSize: 16,
fontWeight: FontWeight.w500,
),
);
}),
),
),
),
Container(
width: 35,
height: 35,
decoration: BoxDecoration(
color: colorPallet('vprice_sectionIncrementerBackground'),
borderRadius: BorderRadius.circular(5),
),
child: IconButton(
icon: Icon(Icons.add),
onPressed: _incrementCounter,
iconSize: 18,
color: colorPallet('vprice_sectionDecrementerBackground'),
),
),
],
)),
),
增量器:
_incrementCounter() {
_counter++;
_event.add(_counter);
}
减量器:
_decrementCounter() {
if (_counter <= 0) {
_counter = 0;
} else {
_counter--;
}
_event.add(_counter);
}
推荐答案
将_counter转换为列表，并为listView.builder中的每个项目添加一个项目.
Turn _counter into a list and add an item for each item in your listView.builder to it.
更改时，请更改_counter [i]；因此，将更改该特定项目！
And when changing, change _counter [i]; And so will change that specific item!
List<int> _counter = List();
ListView.builder(
itemCount: items.documents.length,
physics: AlwaysScrollableScrollPhysics(parent: BouncingScrollPhysics()),
itemBuilder: (context, i) {
if(_counter.length < items.documents.length){
_counter.add(0);
}
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Flexible(
[...]
child: IconButton(
icon: Icon(Icons.remove),
onPressed: (){_decrementCounter(i);},
iconSize: 18,
color: colorPallet('vprice_sectionDecrementerBackground')
),
),
[...]
child: IconButton(
icon: Icon(Icons.add),
onPressed: (){_incrementCounter(i);},
iconSize: 18,
color: colorPallet('vprice_sectionDecrementerBackground'),
),
),
],
)),
),
[...]
_incrementCounter(int i) {
_counter[i]++;
_event.add(_counter[i]);
}
_decrementCounter(int i) {
if (_counter[i] <= 0) {
_counter[i] = 0;
} else {
_counter[i]--;
}
_event.add(_counter[i]);
}
希望这会有所帮助！
这篇关于如何在Flutter的列表视图中递增和递减单个项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
