在 flutter 中创建具有可检索值的 table 类结构

Question

我正在创建一个包含 table 结构化视图的应用程序，在此视图中，用户 select 下拉列表中的值对应于行内容

我正在使用地图来操作行内容，

var data = {
  'CT': {
    's1': {
      1001: 3,
      1002: 6,
      1003: 3,
      1004: 3,
      1008: 4,
      1009: 2,
    },
  }
};

table格式应该是这样的（为演示而硬编码）

并且当按下按钮时，我需要 table 中的所有数据。代码、信用以及 selected dropDownItem(String) 进行计算。所有行的 DropDown 都是相同的，但我想知道 selecteditem 的代码和 credit

我尝试使用 DataTable

但不知道如何用地图操作行也不知道如何检索（获取）table中的数据进行计算

Answer 1

我们需要创建一些列表来存储所需的数据（代码、成绩点和下拉列表的默认值）

所以：

class _ViewScreenState extends State<ViewScreen> {
  List? selectedValues = []; // for storing the dropdown data
  List? creditsDetails = []; // for gradePoint
  List? codeDetais = []; // for code 

  @override
  void initState() {
    super.initState();
    creditsDetails = getPtsCodeDetails('CT', 's1')[0];
    codeDetais = getPtsCodeDetails('CT', 's1')[1];
    selectedValues = setSelectedValues(creditsDetails!.length); // creditDetails's  number of default value in a list
  }

getPtsCodeDetails 将数据从 map 更改为 list

List getPtsCodeDetails(String? dp, String? sem) {
  var ptscode = [];
  ptscode.add(data[dp]![sem]!.values.toList());
  ptscode.add(data[dp]![sem]!.keys.toList());
  return ptscode;
}

并且我们正在使用 ListView.builder 作为 table（尚未检查 DataTable）我们基本上对 DropDowns 项目使用 selectedValues 并在 setState((){};) 中更改所选下拉列表的索引值，因此更改将反映在 ui 和

child: ListView.builder(
                physics: const NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                scrollDirection: Axis.vertical,
                itemCount: creditsDetails!.length,
                itemBuilder: (context, index) {
                  return Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        codeDetais![index].toString(),
                        textAlign: TextAlign.right,
                      ),
                      Text(creditsDetails![index].toString()),
                      DropdownButton<String>(
                        value: selectedValues![index],
                        onChanged: (String? value) {
                          setState(() {
                            selectedValues![index] = value;
                          });
                        },
                        items: grades.map((String value) {
                          return DropdownMenuItem<String>(
                            alignment: Alignment.center,
                            value: value,
                            child: Text(
                              value,
                              textAlign: TextAlign.center,
                            ),
                          );
                        }).toList(),
                      ),
                    ],
                  );
                },
              ),

如果您有任何更好的解决方案，请告诉我

谢谢

在 flutter 中创建具有可检索值的 table 类结构

creating table like structure with retrievable value in flutter

android

dart

dropdown

flutter

flutter-layout