flutter - 将映射列表显示到颤振的列中
问题描述
现在我有这个映射列表
List<Map<String, String>> productMap = [];
它包含[{numOfDay: 0, amount: 814.75}, {numOfDay: 1, amount: 0.00}, {numOfDay: 2, amount: 0.00}, {numOfDay: 3, amount: 0.00}, {numOfDay: 4, amount: 0.00}, {numOfDay: 5, amount: 0.00}, {numOfDay: 6, amount: 0.00}, {numOfDay: 7, amount: 0.00}, {numOfDay: 8, amount: 0.00}, {numOfDay: 9, amount: 0.00}, {numOfDay: 10, amount: 0.00}, {numOfDay: 11, amount: 0.00}, {numOfDay: 12, amount: 0.00}]
我如何将它显示到一个列中以成为这样的东西
解决方案
您可以显示如下所示的“productMap”列表数据。但是您应该修改或添加布局样式。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "landRegistration App",
theme: new ThemeData(primarySwatch: Colors.amber),
home: Test(),
);
}
}
class Test extends StatefulWidget {
@override
_TestState createState() => _TestState();
}
class _TestState extends State<Test> {
final List<Map<String, String>> productMap = [
{"numOfDay": '0', "amount": '814.75'},
{"numOfDay": '1', "amount": '0.00'},
{"numOfDay": '2', "amount": '0.00'},
{"numOfDay": '3', "amount": '0.00'},
{"numOfDay": '4', "amount": '0.00'},
{"numOfDay": '5', "amount": '0.00'},
{"numOfDay": '6', "amount": '0.00'},
{"numOfDay": '7', "amount": '0.00'},
{"numOfDay": '8', "amount": '0.00'},
{"numOfDay": '9', "amount": '0.00'},
{"numOfDay": '10', "amount": '0.00'},
{"numOfDay": '11', "amount": '0.00'},
{"numOfDay": '12', "amount": '0.00'}
];
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "Title",
theme: new ThemeData(primarySwatch: Colors.amber),
home: Scaffold(
body: SafeArea(
child: Container(
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Text('No of Day'),
Text('Amount(RM)'),
],
),
Divider(height: 1),
ListView.separated(
shrinkWrap: true,
itemCount: productMap.length,
separatorBuilder: (BuildContext context, int index) {
return SizedBox(height: 10);
},
itemBuilder: (context, index) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text(productMap[index]['numOfDay']),
SizedBox(width: 20),
Text(productMap[index]['amount']),
],
);
},
)
],
),
),
),
),
);
}
}
推荐阅读
- python - 这个 if 语句在 python 中给我一个无法访问的错误
- javascript - 为什么我无法在 ```getStaticProps``` 中获取查询参数?
- ruby-on-rails - Docker-compose 和 dockerfile - 常犯错误
- json - 地图列表的 JSONDecode
- java - 当前请求不是多部分请求 Spring Boot 和 Postman(上传 json 文件加上额外字段)
- mongodb - 如何在没有 subdocumnet 字段的情况下获取子子文档?
- javascript - THREE.DRACOLoader 不是构造函数
- python - JQuery 中的两个不同 on.change() 事件和一个 ajax 调用
- c# - Blazor App Server Windows 身份验证在发布后不起作用
- c - 我的程序收到信号 SIGSEGV,分段错误,请帮忙