如何在dataTable Flutter中管理多个dataRow的textField控制器

Question

在我的颤振项目中，我想制作用户输入多个产品数量的屏幕。我想管理数据表中多个数据行的文本控制器。

我的数据表代码是：

TextEditingController textController = TextEditingController();

AlertDialog(
        content: Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.height,
          margin: EdgeInsets.all(0),
          child: ListView(
            padding: EdgeInsets.all(0),
            primary: true,
            scrollDirection: Axis.vertical,
            shrinkWrap: true,
            children: [
              DataTable(
                columns: [
                  DataColumn(
                    label: Text(
                      "Product",
                      softWrap: true,
                     ),
                  ),
                  DataColumn(
                    label: Text(
                      "Qty",
                    ),
                  ),
                  DataColumn(
                      label: Text(
                        "Rs",
                      )),
                  DataColumn(
                    label: SizedBox(
                      width: 40,
                      child: Text(
                        'BalQty',
                        ),
                    ),
                  ),
                  DataColumn(
                    label: SizedBox(
                      width: 40,
                      child: Text(
                        'Stock',
                       ),
                    ),
                  ),
                ],
                rows: listOfProduct!
                    .map(
                  ((element) => DataRow(
                    cells: <DataCell>[
                      DataCell(Text(
                        element.name,
                       )),
                      DataCell(
                        TextField(
                          controller: textEditingController,
                          maxLength: 4,
                          decoration: InputDecoration(
                            labelText: 'Qty',
                            labelStyle: TextStyle(fontSize: 9.sp),
                            counterText: "",
                          ),
                          ),
                      ),
                      DataCell(
                        Text(
                          (element.pTR ?? 0).toStringAsFixed(2),
                          ),
                      ),
                      DataCell(Text(
                        element.text!.printDashIfEmpty(),
                        )),
                      DataCell(Text(
                        (element.balQty ?? 0).toStringAsFixed(2),
                        )),
                    ],
                  )),
                )
                    .toList(),
              ),
            ],
          ),
        ),
        actions: <Widget>[
          OutlinedButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text(
                "Cancel",
              )),
          SizedBox(
            width: 10,
          ),
          OutlinedButton(
              onPressed: () async {
                print("QUANTITY : $textEditingController");

                listSearchProductMaster!.forEach((e) {
                  return print("TEXT CONTROLLER: ${e.textEditingController}");
                });
              },
              child: Text(
                "Add",
                ))
        ],
      )

我看到的输出是应该将用户插入的数量添加到特定产品中。

目前，我的应用程序输出是

有人帮忙吗？

Answer 1

在 SingleChildScrollView() 中添加您的表格代码，scrollDirection: Axis.horizontal 参考下面的代码希望对您有所帮助

      SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Column(
              children: <Widget>[
                Container(
                  margin: EdgeInsets.all(20),
                  child: Table(
                    defaultColumnWidth: FixedColumnWidth(80.0),
                    border: TableBorder.all(
                        color: Colors.black,
                        style: BorderStyle.solid,
                        width: 2),
                    children: [
                      TableRow(
                        children: [
                          Column(
                            children: [
                              Text(
                                'Website',
                                style: TextStyle(fontSize: 20.0),
                              ),
                            ],
                          ),
                          Column(
                            children: [
                              Text(
                                'Tutorial',
                                style: TextStyle(fontSize: 20.0),
                              ),
                            ],
                          ),
                          Column(
                            children: [
                              Text(
                                'Review',
                                style: TextStyle(fontSize: 20.0),
                              ),
                            ],
                          ),
                          Column(children: [
                            Text(
                              'Review',
                              style: TextStyle(fontSize: 20.0),
                            ),
                          ]),
                          Column(
                            children: [
                              Text(
                                'Review',
                                style: TextStyle(fontSize: 20.0),
                              ),
                            ],
                          ),
                        ],
                      ),
                      TableRow(children: [
                        Column(
                          children: [
                            Text('Javatpoint'),
                          ],
                        ),
                        Column(
                          children: [
                            Text('Flutter'),
                          ],
                        ),
                        Column(
                          children: [
                            Text('5*'),
                          ],
                        ),
                        Column(
                          children: [
                            Text('5*'),
                          ],
                        ),
                        Column(
                          children: [
                            Text('5*'),
                          ],
                        ),
                      ]),
                      TableRow(
                        children: [
                          Column(children: [
                            Text('Javatpoint'),
                          ]),
                          Column(
                            children: [
                              Text('MySQL'),
                            ],
                          ),
                          Column(
                            children: [
                              Text('5*'),
                            ],
                          ),
                          Column(children: [
                            Text('5*'),
                          ]),
                          Column(children: [
                            Text('5*'),
                          ]),
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),

水平滚动表格

你的屏幕像 - >

Answer 2

嗯，就我而言，我的方法是：

1. 当用户点击要编辑的项目时，显示带有初始值的模态
2. 用户输入和标签确认按钮
3. 有效输入后，应用

它封装了焦点节点和控制器，使用方便。

但它迫使用户再挖掘 1 个 UI 级别，所以也许有更好的方法，但它仍然有效。

我制作了 TextEditModal 小部件和函数来显示这一点。

Future<String> showSingleTextEditDialog({
  @required BuildContext context,
  String initText = '',
}) async {
  String text = initText;
  bool submit = false;

  await showDialog(
    context: context,
    builder: (_) {
      return _SingleTextEditDialog(
        text: text,
        textChanged: (value) => text = value,
        onSubmit: () => submit = true,
      );
    },
  );

  return submit ? text : null;
}

class _SingleTextEditDialog extends StatefulWidget {
  _SingleTextEditDialog({
    Key key,
    @required this.text,
    @required this.textChanged,
    this.onSubmit,
  }) : super(key: key);

  final String text;
  final ValueChanged<String> textChanged;
  final VoidCallback onSubmit;

  @override
  _SingleTextEditDialogState createState() => _SingleTextEditDialogState();
}

class _SingleTextEditDialogState extends State<_SingleTextEditDialog> {
  TextEditingController textController;

  @override
  void initState() {
    super.initState();
    textController = TextEditingController(text: widget.text);
  }

  @override
  void dispose() {
    textController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SimpleDialog(
        children: [
          DecoInput(
            controller: textController,
            onChanged: widget.textChanged,
          ),
          VSpace.md,
          StyledInterfaceButton(
            onTap: () {
              setState(() => widget.onSubmit());
              Navigator.of(context).pop();
            },
            text: 'Confirm',
          ),
          // VSpace.md,
        ],
      );
  }
}

并使用类似

onTap: () async {
  HapticFeedback.mediumImpact();
  final input = await showSingleTextEditDialog(
    context: context,
    initText: text,
  );
  if (input == null) return;
  // valid user input here

  valueChanged(input); // apply user input
},

这不是完整的代码。为了可读性，我最小化了代码。如有错误请忽略。