数据表中的颤动图

问题描述

我想在数据表中 .map 取出一些 Data Row 时遇到此错误。

我在以前的情况下较早地实现了这一点，并且我了解如何做到这一点，但在这种情况下，事情似乎有所不同，并且似乎了解如何定义方法“map”。我想实现如下图所示的内容，其中列标题是静态的，而行是映射出来的。

代码如下：

import 'package:Flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:providerrest/helpers/apihelper.dart';
import 'package:providerrest/models/post.dart';
import 'package:providerrest/provider/homepageprovider.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  GlobalKey<ScaffoldState> _globalKey = GlobalKey();

  _getPosts() async {
    var provider = Provider.of<HomePageProvider>(context,listen: false);

    var postsResponse = await getPosts();
    if (postsResponse.isSuccessful) {
      provider.setPostsList(postsResponse.data,notify: false);
    } else {
      provider.mergePostsList(postsResponse.data,notify: false);
    }

    provider.setIsHomePageProcessing(false);
  }

  @override
  void initState() {
    super.initState();
    _getPosts();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _globalKey,appBar: AppBar(
        title: Text('Provider REST'),),body: Consumer<HomePageProvider>(
        builder: (_,provider,__) {
          return ListView.builder(
            itemBuilder: (_,index) {
              Post post = provider.getPostByIndex(index);
              return DataTable(
                columnSpacing: 50,columns: <DataColumn>[
                  DataColumn(
                    label: Text(
                      'Friendly Name',style: TextStyle(fontStyle: FontStyle.italic),DataColumn(
                    label: Text(
                      'Licence Plate',DataColumn(
                    label: Text(
                      'Delete',],rows: post.map<DaTarow>((e) {
                  return DaTarow(
                    cells: <DataCell>[
                      DataCell(
                        Text('${e.friendlyName}'),DataCell(
                        Text('${e.licencePlate}'),DataCell(
                        Icon(Icons.delete),);
                }).toList(),);
            },itemCount: provider.postsListLength,);
        },);
  }
}

发布模型

class Post {
  int capacity;
  String id;
  String friendlyName;
  String licencePlate;

  Post({this.capacity,this.id,this.friendlyName,this.licencePlate});

  Post.fromJson(Map<String,dynamic> json) {
    capacity = json['capacity'];
    id = json['id'];
    friendlyName = json['friendlyName'];
    licencePlate = json['licencePlate'];
  }

  Map<String,dynamic> toJson() {
    final Map<String,dynamic> data = new Map<String,dynamic>();
    data['capacity'] = this.capacity;
    data['id'] = this.id;
    data['friendlyName'] = this.friendlyName;
    data['licencePlate'] = this.licencePlate;
    return data;
  }
}

API 调用

import 'dart:convert';

import 'package:http/http.dart';
import 'package:providerrest/models/httpresponse.dart';
import 'package:providerrest/models/post.dart';

Future<HTTPResponse<List<Post>>> getPosts() async {
  final response =
      await get('https://run.mocky.io/v3/d7a00528-176c-402f-850e-76567de3c68d');
  if (response.statusCode == 200) {
    var body = jsonDecode(response.body)['data'];
    List<Post> posts = [];
    body.forEach((e) {
      Post post = Post.fromJson(e);
      posts.add(post);
    });
    return HTTPResponse<List<Post>>(
      true,posts,message: 'Request Successful',statusCode: response.statusCode,);
  } else {
    return HTTPResponse<List<Post>>(
      false,null,message:
          'Invalid data received from the server! Please try again in a moment.',);
  }
}

和提供者：

import 'package:Flutter/foundation.dart';
import 'package:providerrest/models/post.dart';

class HomePageProvider extends ChangeNotifier {
  bool _isHomePageProcessing = true;
  List<Post> _postsList = [];

  bool get isHomePageProcessing => _isHomePageProcessing;

  setIsHomePageProcessing(bool value) {
    _isHomePageProcessing = value;
    notifyListeners();
  }

  List<Post> get postsList => _postsList;

  setPostsList(List<Post> list,{bool notify = true}) {
    _postsList = list;
    if (notify) notifyListeners();
  }

  mergePostsList(List<Post> list,{bool notify = true}) {
    _postsList.addAll(list);
    if (notify) notifyListeners();
  }

  deletePost(Post list) {
    _postsList.remove(list);

    notifyListeners();
  }

  addPost(Post post,{bool notify = true}) {
    _postsList.add(post);
    if (notify) notifyListeners();
  }

  Post getPostByIndex(int index) => _postsList[index];

  int get postsListLength => _postsList.length;
}

我以为我是通过在 Post 模型中创建 Map toJson() 方法来实现这一点的，但似乎我错了。

预先感谢您的帮助！

解决方法

我怀疑你在期待下面的代码。

您可以使用 List.generate 来填充数据行列表，而不是使用 ListView.builder。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _globalKey,appBar: AppBar(
        title: Text('Provider REST'),),body: Consumer<HomePageProvider>(
        builder: (_,provider,__) {
          return DataTable(
            columnSpacing: 50,columns: <DataColumn>[
              DataColumn(
                label: Text(
                  'Friendly Name',style: TextStyle(fontStyle: FontStyle.italic),DataColumn(
                label: Text(
                  'Licence Plate',DataColumn(
                label: Text(
                  'Delete',],rows: List.generate(provider._postsList.length,(index) {
              Post post = provider.getPostByIndex(index);
              return DataRow(
                cells: <DataCell>[
                  DataCell(
                    Text('${post.friendlyName}'),DataCell(
                    Text('${post.licencePlate}'),DataCell(
                    Icon(Icons.delete),);
            }),);
        },);
  }

我希望它能帮助你达到你的要求。