Flutter 数据表布局

如何解决Flutter 数据表布局

我在带有 DataTable 的 Flutter 中使用 FutureBuilder 时遇到了一些布局问题，我调用了 API，它自然会显示如下：

可以理解，因为我正在构建一个表列表，它将返回多个表。我只想将行映射为列表，列应该保持不变，就像这样：

因此，First Name、Last Name 和 Delete 列始终相同，它只是像上面第二张图一样映射出表格行单元格。

在我的示例中使用 DataTable 是否可以通过 FutureBuilder 实现此目的？

我已经尝试在 DaTarow 单元格中使用 future builder，因为 DataCell 的每个孩子都是一个小部件，但它看起来真的很可怕，我不确定这是正确的做法。 ..

代码如下：

API 调用：

import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'models/names.dart';

Future<List<NameData>> fetchNames() async {
  List<NameData> names = List();
  final response = await http.get('https://jsonplaceholder.typicode.com/posts');

  if (response.statusCode == 200) {
    // If the server did return a 200 OK response,// then parse the JSON.
    var namesJson = jsonDecode(response.body);
    print(response.body);
    for (int i = 0; i < namesJson.length; i++) {
      names.add(NameData.fromJson(jsonDecode(response.body)[i]));
    }
    return names;
  } else {
    // If the server did not return a 200 OK response,// then throw an exception.
    throw Exception('Failed to load names');
  }
}

名称模型：

import 'package:Flutter/foundation.dart';
import 'dart:core';

class NameData extends ChangeNotifier {
  final int id;
  final int userId;
  final String title;
  final String body;

  NameData({
    this.id,this.userId,this.title,this.body,});

  factory NameData.fromJson(Map<String,dynamic> json) {
    return NameData(
      id: json["id"],userId: json["userId"],title: json["title"],body: json["body"],);
  }
}

以及带有数据表的名称列表：

import 'package:Flutter/material.dart';
import 'models/names.dart';
import 'services/name_api.dart';

class NameList extends StatefulWidget {
  @override
  _NameList createState() => _NameList();
}

class _NameList extends State<NameList> {
  Future<List<NameData>> futureNames;

  @override
  void initState() {
    super.initState();
    futureNames = fetchNames();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(
          height: 600,child: FutureBuilder<List<NameData>>(
            future: futureNames,builder: (context,snapshot) {
              if (snapshot.hasData) {
                return ListView.builder(
                  itemCount: snapshot.data.length,itemBuilder: (context,index) {
                    return Column(
                      crossAxisAlignment: CrossAxisAlignment.start,mainAxisAlignment: MainAxisAlignment.spaceAround,children: [
                        SizedBox(
                          height: 12.0,),Container(
                          decoration: Boxdecoration(
                            color: Colors.grey[300],borderRadius: BorderRadius.all(
                              Radius.circular(12.0),child: SingleChildScrollView(
                            scrollDirection: Axis.horizontal,child: DataTable(
                              columns: <DataColumn>[
                                DataColumn(
                                  label: Text(
                                    'First Name',style:
                                        TextStyle(fontStyle: FontStyle.italic),DataColumn(
                                  label: Text(
                                    'Last Name',DataColumn(
                                  label: Text(
                                    'Delete',],rows: <DaTarow>[
                                DaTarow(
                                  cells: <DataCell>[
                                    DataCell(
                                        Text('${snapshot.data[index].id}')),DataCell(
                                        Text('${snapshot.data[index].userId}')),DataCell(Icon(Icons.delete)),SizedBox(
                          height: 16.0,);
                  },);
              } else if (snapshot.hasError) {
                return Text("${snapshot.error}");
              }
              return Container();
            },);
  }
}

提前感谢您的时间和帮助。

解决方法

第 1 步：

 Future<List<NameData>> generateList() async {
    final response =
        await http.get('https://jsonplaceholder.typicode.com/posts');

    var list = await json.decode(response.body).cast<Map<String,dynamic>>();
    return await list.map<NameData>((json) => NameData.fromJson(json)).toList();
  }

第 2 步：

@override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text('DataTable'),),body: Container(
            child: FutureBuilder<List<NameData>>(
          future: generateList(),builder: (context,snapShot) {
            if (snapShot.hasData) {
              return SingleChildScrollView(
                scrollDirection: Axis.horizontal,child: DataTable(
                  columns: <DataColumn>[
                    DataColumn(
                      label: Text(
                        'First Name',style: TextStyle(fontStyle: FontStyle.italic),DataColumn(
                      label: Text(
                        'Last Name',DataColumn(
                      label: Text(
                        'Delete',],rows: snapShot.data.map<DataRow>((e) {
                    return DataRow(
                      cells: <DataCell>[
                        DataCell(Text('${e.id}')),DataCell(Text('${e.userId}')),DataCell(Icon(Icons.delete)),);
                  }).toList(),);
            }else{
              return CircularProgressIndicator();
            }
          },)),);
  }