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

Question

我正在其中构建一个 listview.builder returns 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('+')),
                        ],
                      )
                    ],
                  ),
                ),
              );
            }),
      )),
    );
  }
}

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

How to update specific value on button click in card widget inside listview.builder Flutter

listview

dart

flutter