如何在颤振中创建这个小部件

Question

我正在创建一个 Flutter 应用，它只有两个小部件：一个标题，然后是一个容器，里面有一个表格，然后排列如下：

红色是我不知道该怎么做的小部件，因为它涉及创建一个“表”并使用来自 API 调用的数据更新它。截至目前，我没有 API 调用，而是有一个静态 json 资产，但我都不知道如何使用。不过，这是静态 json 资产/api 调用的内容：

[
    { "username": "Legit", "KD": "1.46", "WKD": "1.46", "Record": "10" },
    { "username": "Relume", "KD": "1.46", "WKD": "1.46", "Record": "10" },
    { "username": "Beral98", "KD": "1.46", "WKD": "1.46", "Record": "10" },
    { "username": "pedrohaccorsi", "KD": "1.46", "WKD": "1.46", "Record": "10" },
    { "username": "colono", "KD": "1.46", "WKD": "1.46", "Record": "10" }
]

唯一需要考虑的一点是：第一列标题必须为空 - 例如，在设计的红色方块中，“合法”上方将是“用户名”，但将其省略。第二个表中的“gameMode”也是如此。

从这个意义上说，我需要一些帮助来弄清楚如何创建这个表格小部件并让它呈现来自 json 资产的数据（后者是一个 API 调用），并让它看起来像之前展示的概念。

---

Obs.：我是一名 Java Spring 和 ABAP 开发人员，所以当我在这里开始这个应用程序时，我与移动开发的接触实际上已经 2 天了。因此，感谢您提供详细的答案。但是，对解决方案的简短描述已经让我非常高兴。谢谢！

Answer 1

看看这个

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<Map> data = [
    {"username": "Legit", "KD": "1.46", "WKD": "1.46", "Record": "10"},
    {"username": "Relume", "KD": "1.46", "WKD": "1.46", "Record": "10"},
    {"username": "Beral98", "KD": "1.46", "WKD": "1.46", "Record": "10"},
    {"username": "pedrohaccorsi", "KD": "1.46", "WKD": "1.46", "Record": "10"},
    {"username": "colono", "KD": "1.46", "WKD": "1.46", "Record": "10"}
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('DataTable Demo'),
        ),
        body: ListView(
          scrollDirection: Axis.horizontal,
          children: [_createDataTable()],
        ),
      ),
    );
  }

  DataTable _createDataTable() {
    return DataTable(columns: _createColumns(), rows: _createRows());
  }

  List<DataColumn> _createColumns() {
    return [
      DataColumn(label: Text('')),
      DataColumn(label: Text('KD')),
      DataColumn(label: Text('WKD')),
      DataColumn(label: Text('Record'))
    ];
  }

  List<DataRow> _createRows() {
    return List.generate(
        data.length,
        (index) => DataRow(cells: [
              DataCell(Text(data[index]["username"])),
              DataCell(Text(data[index]["KD"])),
              DataCell(Text(data[index]["WKD"])),
              DataCell(Text(data[index]["Record"])),
            ]));
  }
}

输出：

还有更多 this 和 this