将映射列表显示到颤动的列中

Question

现在我有这个映射列表

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}]

我如何将它显示到一列中以成为这样的东西

Answer 1

在 Flutter 中，您可以使用两个名为Colum和的小Row部件，它们可以模拟表格的行为。

请注意，您的数据源不是List<Map<String, String>>但是List<dynamic>

您的代码应该像这样开始：

import 'package:flutter/material.dart';

class TableWidget extends StatelessWidget {
  final List<dynamic> 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
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.all(50.0),
        child: Column(children: [
          Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
            Text("No o Day"),
            Text("Amount (RM)"),
          ]),
          ..._getBody(),
        ]),
      ),
    );
  }

  _getBody() {
    return productMap.map((e) => Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
          Text(e["numOfDay"].toString()),
          Text(e["amount"].toString()),
        ]));
  }
}

输出：