在Flutter中在ListViewBuilder中使用动态TextField

Question

我试图在动态范围内构建动态TextField列表，但不了解如何处理它。

我的列表如下：

我的代码结构是：

ListView.builder(
            shrinkWrap: true,
            itemCount: itemList.length,
            itemBuilder: (context, index) {

              if(itemList.length == null) {
                return _buildProgressIndicator();
              } else {
                return singleItemList(index);
              }
          })




Widget singleItemList(int index) {

if((itemList.length -1) < index)
{
  return Container(child: null); 
} else {

  dynamic singleItem = itemList[index];
  String counter = (index+1).toString();

  return 
     Container(

        decoration: BoxDecoration(
          color: Colors.white,
        ),

      child: Row(    

        children:[

          Expanded(
            flex: 1,
            child: Text(counter,style: orderBookItemListCounter(),)
          ),



          Expanded(
            flex: 3,
            child: TextField(
                controller: _addProductToCart(counter),
                decoration: InputDecoration(
                  labelText: "Qty",
                ),
            )
          ),

    ])
  );
}
}

1. 我的产品列表不正确，可能会更改产品数量，
2. 我想根据产品ID捕获数量。

谢谢 ：）

Answer 1

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}



class _MyHomePageState extends State<MyHomePage> {
  List<TextEditingController> _controllers = new List();
  List<Item> itemList = [
    Item("ID1", "product 1"),
    Item("ID2", "product 2"),
    Item("ID3", "product 3"),
    Item("ID4", "product 4"),
    Item("ID5", "product 5"),
    Item("ID6", "product 6"),
    Item("ID7", "product 7"),
    Item("ID8", "product 8"),
    Item("ID9", "product 9"),
    Item("ID10", "product 10"),
    Item("ID11", "product 11"),
    Item("ID12", "product 12"),
    Item("ID13", "product 13"),
    Item("ID14", "product 14"),
    Item("ID15", "product 15"),
    Item("ID16", "product 16"),
    Item("ID17", "product 17"),
    Item("ID18", "product 18"),



  ];



  Map<String, int> quantities = {};

  void takeNumber(String text, String itemId) {
    try {
      int number = int.parse(text);
      quantities[itemId] = number;
      print(quantities);
    } on FormatException {}
  }



  Widget singleItemList(int index, TextEditingController controllertxt) {
    Item item = itemList[index];

    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
      ),
      child: Row(
        children: [


          Expanded(flex: 1, child: Text("${index + 1}")),

          Expanded(
            flex: 3,
            child: new TextField(
              controller: controllertxt,
              keyboardType: TextInputType.number,
              onChanged: (text) {
                takeNumber(text, item.id);
              },
              decoration: InputDecoration(
                labelText: "Qty",
              ),
            ),
          ),
        ],
      ),
    );
  }



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Demo")),
      body: Center(
        child: ListView.builder(
            shrinkWrap: true,
            itemCount: itemList.length,
            itemBuilder: (context, index) {
              _controllers.add(new TextEditingController());
              if (itemList.isEmpty) {
                return CircularProgressIndicator();
              } else {

                return singleItemList(index,_controllers[index]);
              }
            }),
      ),
    );
  }
}




class Item {
  final String id;
  final String name;

  Item(this.id, this.name);
}

Answer 2

您有几种选择，具体取决于您如何构建应用程序或在哪里拥有中心状态。

我在这里为您提出一种更新本地地图变量的解决方案。或者，您可以将事件/流发送到商店所在的地方。

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Item> itemList = [
    Item("ID1", "First product"),
    Item("ID2", "Second product"),
  ];

  Map<String, int> quantities = {};

  void takeNumber(String text, String itemId) {
    try {
      int number = int.parse(text);
      quantities[itemId] = number;
      print(quantities);
    } on FormatException {}
  }

  Widget singleItemList(int index) {
    Item item = itemList[index];

    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
      ),
      child: Row(
        children: [
          Expanded(flex: 1, child: Text("${index + 1}")),
          Expanded(
            flex: 3,
            child: TextField(
              keyboardType: TextInputType.number,
              onChanged: (text) {
                takeNumber(text, item.id);
              },
              decoration: InputDecoration(
                labelText: "Qty",
              ),
            ),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Demo")),
      body: Center(
        child: ListView.builder(
            shrinkWrap: true,
            itemCount: itemList.length,
            itemBuilder: (context, index) {
              if (itemList.isEmpty) {
                return CircularProgressIndicator();
              } else {
                return singleItemList(index);
              }
            }),
      ),
    );
  }
}

class Item {
  final String id;
  final String name;

  Item(this.id, this.name);
}