如何在 flutter 中创建此小部件

Question

我正在创建一个 flutter 应用程序，它只有两个小部件：一个标题，然后是一个带有表格的容器，然后排列如下所示：

红色是我不知道该怎么做的那个小部件，因为它涉及创建一个“表”并使用来自 API 调用的数据更新它。 到目前为止，我没有 API 调用，而是有一个 static json 资产，但我不知道如何使用这两个资产。 尽管如此，这是 static 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" }
]

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

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

---

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

Answer 1

查看 Material 附带的DataTable小部件。

Answer 2

看看这个

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

output：

还有更多这个和 这个