如何在 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：

還有更多這個和 這個