如何将动态表添加到Flutter

Question

如何将现有值映射到Flutter动态表？

以下是我现有的工作代码。正在使用json打印值。我想将这些现有值打印到表中，并最终按列对它们进行排序。 注意：Flutter的新手，感谢您的帮助。

Widget bodyData() => DataTable(
      onSelectAll: (b) {},
      sortColumnIndex: 1,
      sortAscending: true,
      columns: <DataColumn>[
        DataColumn(
          label: Text("First Name"),
          numeric: false,
          onSort: (i, b) {
            print("$i $b");
            setState(() {
              names.sort((a, b) => a.firstName.compareTo(b.firstName));
            });
          },
          tooltip: "To display first name of the Name",
        ),
        DataColumn(
          label: Text("Last Name"),
          numeric: false,
          onSort: (i, b) {
            print("$i $b");
            setState(() {
              names.sort((a, b) => a.lastName.compareTo(b.lastName));
            });
          },
          tooltip: "To display last name of the Name",
        ),
      ],
      rows: names
          .map(
            (name) => DataRow(
                  cells: [
                    DataCell(
                      Text(name.firstName),
                      showEditIcon: false,
                      placeholder: false,
                    ),
                    DataCell(
                      Text(name.lastName),
                      showEditIcon: false,
                      placeholder: false,
                    )
                  ],
                ),
          )
          .toList());

数据表： 来自：https://github.com/iampawan/FlutterWidgets/blob/master/lib/Episode5_DataTable/datatable_example.dart

app:elevation

https://material.io/components/data-tables/#

谢谢！ ?

Answer 1

我不确定您面临什么样的困难。

尝试一下，

class PhotosList extends StatefulWidget {
  final List photos;

  PhotosList({Key key, this.photos})
      : assert(photos != null),
        super(key: key);

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

class _PhotosListState extends State<PhotosList> {
  @override
  Widget build(BuildContext context) {
    return bodyData();
  }

  Widget bodyData() => DataTable(
      sortColumnIndex: 1,
      sortAscending: true,
      columns: <DataColumn>[
        DataColumn(
          label: Text("Company Name"),
          onSort: (_, __) {
            setState(() {
              widget.photos.sort((a, b) => a.data["quote"]["companyName"]
                  .compareTo(b.data["quote"]["companyName"]));
            });
          },
        ),
        DataColumn(
          label: Text("Dividend Yield"),
          onSort: (_, __) {
            setState(() {
              widget.photos.sort((a, b) => a.data["stats"]["dividendYield"]
                  .compareTo(b.data["stats"]["dividendYield"]));
            });
          },
        ),
        DataColumn(
          label: Text("IEX Bid Price"),
          onSort: (_, __) {
            setState(() {
              widget.photos.sort((a, b) => a.data["quote"]["iexBidPrice"]
                  .compareTo(b.data["quote"]["iexBidPrice"]));
            });
          },
        ),
        DataColumn(
          label: Text("Latest Price"),
          onSort: (_, __) {
            setState(() {
              widget.photos.sort((a, b) => a.data["stats"]["latestPrice"]
                  .compareTo(b.data["stats"]["latestPrice"]));
            });
          },
        ),
      ],
      rows: widget.photos
          .map(
            (photo) => DataRow(
              cells: [
                DataCell(
                  Text('${photo.data["quote"]["companyName"] ?? ""}'),
                ),
                DataCell(
                  Text("Dividend Yield:"
                      '${photo.data["stats"]["dividendYield"] ?? ""}'),
                ),
                DataCell(
                  Text("Last Price:"
                      '${photo.data["quote"]["iexBidPrice"] ?? ""}'),
                ),
                DataCell(
                  Text("Last Price:"
                      '${photo.data["stats"]["latestPrice"] ?? ""}'),
                ),
              ],
            ),
          )
          .toList());
}