dart TextEditingController值未保存到列表

osh3o9ms  于 2023-06-19  发布在  其他
关注(0)|答案(1)|浏览(65)

我有一个List<Map<String,dynamic>>叫做woodsArray
我需要添加三个参数命名的长度,宽度,并在此列表中的面积。为此,我使用了一个ListView.builder和三个TextEditingController列表。我的要求是,面积应根据长度和宽度。虽然渲染正确,但没有添加到woodsArray
这就是我到目前为止所做的。

List<Map<String, dynamic>> woodsArray = [];
  List<TextEditingController> woodlengthControllers = [];
  List<TextEditingController> woodbreadthControllers = [];
  List<TextEditingController> woodAreaControllers = [];

ListView.builder中,

ListView.builder(
              padding: EdgeInsets.zero,
              shrinkWrap: true,
              itemCount: woodsArray.length,
              itemBuilder: (BuildContext context, int index) {
                woodlengthControllers.add(
                  TextEditingController(text: ''),
                );
                woodbreadthControllers.add(TextEditingController(text: ''));
                woodAreaControllers.add(TextEditingController(text: ''));
                ///// AREA CALCULATION /////
                    if (woodlengthControllers[index].text != '' &&
                    woodbreadthControllers[index].text != '') {
                  Future.delayed(Duration.zero, () {
                    setState(() {
                      woodAreaControllers[index].text =
                          ((num.tryParse(woodlengthControllers[index].text))! *
                                  (num.tryParse(
                                      woodbreadthControllers[index].text))! *
                                  0.00001111)
                              .toStringAsFixed(2);
                    });
                  });
                },
               //////////////////////////
               return Row(
                 children:[
                     SizedBox(
                            width: 110,
                            child: TextFormField(
                              controller: woodlengthControllers[index],
                              style: formPrimaryTextStyle(context),
                              decoration: InputDecoration(
                                border: const OutlineInputBorder(),
                                labelStyle: formPrimaryTextStyle(context),
                              ),
                              onChanged: (val) {
                                woodsArray[index]['wood_length'] =
                                    woodlengthControllers[index].text;
                              },
                            ),
                          ),
                          SizedBox(
                            width: 110,
                            child: TextFormField(
                              controller: woodbreadthControllers[index],
                              style: formPrimaryTextStyle(context),
                              decoration: InputDecoration(
                                border: const OutlineInputBorder(),
                                labelStyle: formPrimaryTextStyle(context),
                              ),
                              onChanged: (val) {
                                woodsArray[index]['wood_breadth'] =
                                    woodbreadthControllers[index].text;
                              },
                            ),
                          ),
                           SizedBox(
                            width: 110,
                            child: TextFormField(
                              controller: woodAreaControllers[index],
                              style: formPrimaryTextStyle(context),
                              decoration: InputDecoration(
                                border: const OutlineInputBorder(),
                                labelStyle: formPrimaryTextStyle(context),
                              ),
                              onChanged: (val) {
                                woodsArray[index]['wood_area'] =
                                    woodAreaControllers[index].text;
                              },
                            ),
                          ),
                      ],
                 );  
             },
           ),

到目前为止,该区域在ListView中得到了正确的渲染。但是当我尝试打印woodsArray时,它只显示我定义的长度和宽度,而不是根据长度和宽度控制器值自动计算的面积。例如,考虑这个。
woodsArray=[{'wood_length':1200, 'wood_breadth':300}](No 'wood_area')
我做错了什么?有人能给我一些建议吗?我应该做些不同的事情。

n3schb8v

n3schb8v1#

我重新编写了你的代码,我认为这样更好。试试这个完整的工作示例

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: MainPage()));
}

class MainPage extends StatefulWidget {
  const MainPage({Key? key}) : super(key: key);

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  List<Wood> woodsArray = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        padding: EdgeInsets.zero,
        shrinkWrap: true,
        itemCount: woodsArray.length,
        itemBuilder: (BuildContext context, int index) {
          final Wood wood = woodsArray[index];
          return Row(
            children: [
              SizedBox(
                width: 110,
                child: TextFormField(
                  controller: wood.lengthController,
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                  ),
                  onChanged: (val) {
                    wood.calculateArea();
                  },
                ),
              ),
              SizedBox(
                width: 110,
                child: TextFormField(
                  controller: wood.breadthController,
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                  ),
                  onChanged: (val) {
                    wood.calculateArea();
                  },
                ),
              ),
              SizedBox(
                width: 110,
                child: TextFormField(
                  enabled: false,
                  controller: wood.areaController,
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                  ),
                ),
              ),
            ],
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(
          () {
            print(woodsArray);
            woodsArray.add(Wood('1200', '300'));
          },
        ),
        child: const Icon(Icons.add),
      ),
    );
  }
}

class Wood {
  TextEditingController lengthController;
  TextEditingController breadthController;
  TextEditingController areaController = TextEditingController();

  Wood(String length, String breadth)
      : lengthController = TextEditingController(text: length),
        breadthController = TextEditingController(text: breadth) {
    calculateArea();
  }

  void calculateArea() {
    final l = num.tryParse(length);
    final b = num.tryParse(breadth);
    if (l != null && b != null) {
      areaController.text = (l * b * 0.0001111).toStringAsFixed(2);
    }
  }

  String get length => lengthController.text;

  String get breadth => breadthController.text;

  String get area => areaController.text;

  @override
  String toString() => 'Wood(length: $length, breadth: $breadth, area: $area';
}

请注意,我不得不省略对formPrimaryTextStyle的调用,因为我不知道它的实现,所以您可以再次添加它。按+将添加一个新的木材项目,并打印当前的木材列表。我希望它能让你更好地了解软件开发。

相关问题