Question

有人知道如何在Flutter中动态地将更多行添加到DataTable中。如您所见，我的代码非常“硬编码” [行：11-31]。
应该有一种方法可以摆脱编写越来越多的DataRows的麻烦。

代码：

private static bool loadedPrefab = false;

private void Start()
{
    if (!loaded)
    {
        loaded = true;
        level_index = PlayerPrefs.GetInt("Last_Level");
        SceneManager.LoadScene(level_index);

        // Return because you don't want to execute the rest yet
        // but instead in the new loaded scene
        return;
    }

    // The same way skip if the prefab was already loaded before
    if(!loadedPrefab)
    {
        loadedPrefab = true;

        GameObject canvas = GameObject.Find("Canvas");
        GameObject play = Instantiate(PlayButton, canvas.transform.position, Quaternion.identity);
        play.transform.SetParent(canvas.transform, false);
    }
}

Answer 1

您可以使用

listOfColumns.map(((element) => DataRow(...))).toList()

这是使用此方法的代码。

class DataTableWidget extends StatelessWidget {
  final List<Map<String, String>> listOfColumns = [
    {"Name": "AAAAAA", "Number": "1", "State": "Yes"},
    {"Name": "BBBBBB", "Number": "2", "State": "no"},
    {"Name": "CCCCCC", "Number": "3", "State": "Yes"}
  ];
//  DataTableWidget(this.listOfColumns);     // Getting the data from outside, on initialization
  @override
  Widget build(BuildContext context) {
    return DataTable(
      columns: [
        DataColumn(label: Text('Patch')),
        DataColumn(label: Text('Version')),
        DataColumn(label: Text('Ready')),
      ],
      rows:
          listOfColumns // Loops through dataColumnText, each iteration assigning the value to element
              .map(
                ((element) => DataRow(
                      cells: <DataCell>[
                        DataCell(Text(element["Name"])), //Extracting from Map element the value
                        DataCell(Text(element["Number"])),
                        DataCell(Text(element["State"])),
                      ],
                    )),
              )
              .toList(),
    );
  }
}

Answer 2

您可以执行以下操作：

class DataTableWidget extends StatelessWidget {
  List<Map> someData = [
    {
      "text1": "AAAA",
      "text2": "1",
      "text3": "YES",
    },
    {
      "text1": "BBBB",
      "text2": "2",
      "text3": "NO",
    },
    {
      "text1": "CCCC",
      "text2": "3",
      "text3": "YES",
    },
  ];
  DataRow _getDataRow(data) {
    return DataRow(
      cells: <DataCell>[
        DataCell(Text(data["text1"])),
        DataCell(Text(data["text2"])),
        DataCell(Text(data["text3"])),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return DataTable(
      columns: [
        DataColumn(label: Text('Patch')),
        DataColumn(label: Text('Version')),
        DataColumn(label: Text('Ready')),
      ],
      rows: List.generate(
          someData.length, (index) => _getDataRow(someData[index])),
    );
  }
}

Answer 3

您可能要担心的是底层数据结构（可能是列表）。像表这样的UI元素只需观察即可。在更新列表后，setState（）函数会通知UI重新查看。

这是一个有效的示例，其内容来自doc文档示例。点击按钮添加行。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Add Rows',
      home: MyHomePage(title: 'Add Rows'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<DataRow> _rowList = [
    DataRow(cells: <DataCell>[
      DataCell(Text('AAAAAA')),
      DataCell(Text('1')),
      DataCell(Text('Yes')),
    ]),
  ];

  void _addRow() {
    // Built in Flutter Method.
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below.
      _rowList.add(DataRow(cells: <DataCell>[
        DataCell(Text('BBBBBB')),
        DataCell(Text('2')),
        DataCell(Text('No')),
      ]));
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: DataTable(columns: [
          DataColumn(label: Text('Patch')),
          DataColumn(label: Text('Version')),
          DataColumn(label: Text('Ready')),
        ], rows: _rowList),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: _addRow,
        label: Text('Add Row'),
        backgroundColor: Colors.green,
      ),
    );
  }
}

这为我建立了

flutter build web

然后与

一起运行

flutter run -d chrome

如何动态地向表中添加项目？

3 个答案: