flutter - 如何将动态表添加到 Flutter
问题描述
如何将现有值映射到 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"]?? ""}'),
//
],
),
);
},
);
}
}
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/#
谢谢!
解决方案
我不确定你面临什么样的困难。
试试这个,
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());
}
推荐阅读
- azure - 直接将 Azure VM 快照上传到 Azure Blob 存储,无需将 VHD 保存到本地计算机
- php - Metabox重新排序后端woocommerce
- excel - 将页脚文本框形状添加到图表,以便使用 VBA 粘贴图表
- mysql - 当有不同的 WHERE 语句时,如何划分相同的 COUNT?
- django - 尝试使用 nginx 和 docker 部署 django 时加载共享库时出错
- java - 如何在 AndroidManifest 中获取设备型号并制作条件?
- c# - 是否可以使编译器警告报告在不同版本的 MS 构建引擎之间保持一致?
- xpages - xp:text 添加了不必要的段落元素
- vue.js - vuejs 与以前的选择不同的 v-if
- c++ - 文件没有在 C++ 中第二次打开