当在颤动上按下特定项目小部件时，如何在 ListView.builder 中显示、编辑或删除小部件/小部件的属性？

Question

我制作了一个自定义小部件，它从 API 中获取数据并在 Flutter 中使用 ListView.builder 方法显示它。 ListView.builder 返回一个小部件，因此我制作了由 ListView.builder 返回的自定义小部件“menuLoadedList”，以显示来自 API 的数据。在这个自定义的“menuLoadedList”小部件中，有许多小部件，用于显示数字、显示项目名称和用于检测用户点击的 GestureDetector 小部件，onTap()。活动如下所示： ListView.builder displaying data from the API

我只设计了这一个列表ListView design，listview.builder方法用来显示数据库中的所有数据。

child: FutureBuilder(
            future: _thisMenu(),
            builder: (BuildContext context, AsyncSnapshot snapshot) {
              if (snapshot.hasData) {
                // load the data here to display it in the list view
                print("Data is here");
                return ListView.builder(
                  padding: const EdgeInsets.only(bottom: 50),
                  itemCount: snapshot.data.menus.length,
                  itemBuilder: (context, index) {
                    Menu menuu = snapshot.data;
                    MenuElement menuItem = menuu.menus[index];
                    return menuLoadedList(menuItem, index);
                  },
                );
              }

              ///when the API cannot fetch the data properly
              /// should design some error handling mechanism, custom widget to displau "Oops! Something went wrong" with a image
              else if (snapshot.hasError) {
                return Text("${snapshot.error}");
              }

              /// when the data is still loading, for loading screen
              else {
                print("we are still loading");
                return ListView.builder(
                  itemCount: 6,
                  itemBuilder: (context, index) {
                    return menuListShimmer();
                  },
                );
              }
            },
          ),

显示数据的自定义小部件是通过以下方式实现的：-

 Widget menuLoadedList(MenuElement menuItem, int index) {
return DefaultTextStyle(
  style: const TextStyle(color: Colors.white, fontSize: 16.0),
  child: Column(
    children: <Widget>[
      Container(
        padding: const EdgeInsets.all(4.0),
        //column for the list view to display menu name, price and displying button to add, remove and show the quantity of the order
        child: Column(
          children: <Widget>[
            //first row shows the menu name and price
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                // shows the menu name
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(menuItem.name),
                  ),
                ),
                //show the menu price
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text("Rs. " + menuItem.price.toString()),
                ),
              ],
            ),
            //second row shows the add, remove and show the quantity of the order
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                //first button shows the add button
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: GestureDetector(
                    // when the users taps the minus button
                    onTap: () {
                      print(index);
                      _addItemToOder(false, index, "Spicy", 5);
                    },
                    child: const Icon(
                      Icons.remove_circle,
                      color: Colors.white,
                    ),
                  ),
                ),
                Text("$counter"), // this needs to be updated
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: GestureDetector(
                    onTap: () {
                      print(index);
                      _addItemToOder(true, index, "Spicy", 5);
                      setState(() {
                        
                      });
                    },
                    child: const Icon(
                      Icons.add_circle,
                      color: Colors.white,
                    ),
                  ),
                ),
              ],
            ),
            Visibility(
              child: Container(
                // height: 30,
                margin: const EdgeInsets.all(2.0),
                child: const TextField(
                  autofocus: false,
                  style: TextStyle(color: Colors.white, fontSize: 12.0),
                  //defines the charcter of test field for the remarks textfield
                  decoration: InputDecoration(
                    isDense: true,
                    contentPadding: EdgeInsets.all(8),
                    enabledBorder: OutlineInputBorder(
                      borderSide:
                          BorderSide(color: Colors.blue, width: 2.0),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderSide:
                          BorderSide(color: Colors.green, width: 2.0),
                    ),
                    hintText: "Add your remarks",
                    hintStyle: TextStyle(
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
              visible: showRemarksField,
            ),
          ],
        ),
      ),
    ],
  ),
);

}

在自定义小部件实现中，有需要更新的带有注释的文本小部件。当使用 onTap 方法调用应用程序时，如何仅从许多其他项中更新该特定 Listview.builder 项的 Text 小部件。

我的问题是：-当我按下自定义小部件中任何小部件项目中的加号或减号按钮时，如何仅更新该自定义小部件中的文本小部件其属性/值在 listview.builder 中？如何跟踪我按下的 listview.builder 中列表项的按钮并仅更新该列表项中的文本小部件？

注意：-当我按下列表中的任何一个加号或减号按钮时，每个文本值都会更新。我无法更改自定义小部件中的任何特定文本小部件。

Answer 1

// 在您的班级顶部生成空白列表：--> List priceChange = [];

//关于未来的建设者：

    Menu menuu = snapshot.data;
    MenuElement menuItem = menuu.menus[index];
    priceChange = List.generate(snapshot.data.menus.length, (index){
      return 0.0; // or snaphot.data.menu. --> where u put price data
    });

// 在小部件上也许你可以传递 bool 来操作渲染的 ui：

return menuLoadedList(menuItem, index, List<double> priceChange, bool userTap){
      // in child ----->
      child: Text("Rs. " + userTap[index]? priceChange[index]: menuItem.price.toString());
    };

并操纵基于 Ui 的列表 (priceChange)：

    setState(() {
    //remove old data
    priceChange.removeAt(index);
    //inset new
    priceChange.insert(index, 100);
  });

对于这种逻辑，我更喜欢使用bloc pattern

Answer 2

在调用 setState 时将“counter”属性添加到 MenuElement 中它仍然值编辑