在Flutter中在ListViewBuilder中使用动态TextField [英] Use dynamic TextField in ListViewBuilder in Flutter

问题描述

我试图以动态方式构建动态TextField列表，但不了解如何处理。

I am trying to build a dynamic TextField list in flutter but did not understand at how I can handle it.

我的列表如下：

我的代码结构是：

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捕获数量。

感谢
：）

推荐答案

您可以根据自己的应用程序体系结构或位置来选择几种方法中央国家。

You have several options depending how you architecture your application or where you have your central state.

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

I propose you here a solution that updates a local map variable. Alternatively, you could send an event/stream to the place your store is located.

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

这篇关于在Flutter中在ListViewBuilder中使用动态TextField的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！