flutter - 将映射列表显示到列中以进行抖动

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

您可以显示“producMap”列表数据，如下所示。
但是您应该修改或添加布局样式。

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']),
                      ],
                    );
                  },
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}