flutter - 如何将动态表添加到 Flutter

Question

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

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

class PhotosList extends StatelessWidget {
  final List<Photo> photos;

  PhotosList({Key key, this.photos}) : super(key: key);



  @override
  Widget build(BuildContext context) {


    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
      ),
      itemCount: photos.length,
      itemBuilder: (context, index) {
        return ListTile(
          // leading: Icon(Icons.album),
          title: Column(  children: [
            Text(photos[index].symbol),
            Padding(padding: EdgeInsets.only(bottom: 10.0)),
            //Text(photos[index].companyName),

          ],
          ),
          subtitle: Column(


            children: [

              Text ('${photos[index].data["quote"]["companyName"] ?? ""}'),
              Text ("Dividend Yield:" '${photos[index].data["stats"]["dividendYield"] ?? ""}'),
              Text ("Last Price:" '${photos[index].data["quote"]["iexBidPrice"]?? ""}'),
              Text ("Last Price:" '${photos[index].data["stats"]["latestPrice"]?? ""}'),

              //


            ],
          ),
        );
      },
    );
  }
}

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

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://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());
}