Question

在我的产品屏幕中，我有两个按钮+和-用于数量，我的ListView中的这两个按钮递增/递减整个列表，我想在单击单个列表项的按钮时增加或减少数量。如果我增加或减少计数器，它将在每个列表项中增加。

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);
 }

Answer 1

将_counter转换为列表，并为listView.builder中的每个项目添加一个项目。

更改时，请更改_counter [i]；因此，将更改该特定项目！

  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的列表视图中递增和递减单个项目？

1 个答案: