我想在Flutter應用程式的串列視圖中顯示我的Json資料

我想在串列視圖中顯示我所有的json資料。但問題是，當我想在串列視圖中獲得idEmployee、officeID、avater和fullName時，它顯示錯誤。

type 'String' in not a subtype of type 'int'.

當我想使用FutureBuilder只顯示全名時，如果我在模型類中評論了所有沒有全名的變數，它就能正常作業。但當我想添加沒有全名的任何其他資料時，它顯示錯誤。

這是我想在listview中顯示的json資料

{
    "success": true。
    "data": {
        "count": 259,
        "data": [
            {
                "idEmployee": 3559,
                "avatar": "f8b8ad832a591db9c86a157a3739d98b.jpg",
                "fullName": "A X C"。
                "officeID": "1003559",
                "email": "",
                "designation": "客戶經理",
                "部門": "Accounts",
                "mobileNumber": "",
                "workStation": "軟體辦公室"。
                "businessUnit": "EMD".
            }
        ]
    },
    "id": 2899。
}

這里是我的模型類

class ListAlbum {
  final int idEmployee;
  final String avatar;
  final String fullName;
  final int officeID;
  final String email;
  final String designation;
  final String department;
  final String mobileNumber;
  final String workStation;
  final String businessUnit;

  ListAlbum({
    required this.idEmployee,
    required this.avatar。
    required this.fullName。
    required this.officeID。
    required this.email。
    required this.designation。
    required this.department。
    required this.mobileNumber,
    required this.workStation,
    required this.businessUnit,
  });

  factory ListAlbum.fromJson(Map<String, dynamic> json) {
    return ListAlbum(
      idEmployee: json['idEmployee']。
      avatar: json['avatar']。
      fullName: json['fullName']。
      officeID: json['officeID']。
      email: json['email']。
      designation: json['designation']。
      部門：json['部門']。
      mobileNumber: json['mobileNumber']。
      workStation: json['workStation']。
      businessUnit: json['businessUnit']。
    );
  }
}

這是我的完整代碼

現在我想通過解決這些錯誤，在Scaffold中創建并添加帶有資料的listview。誰能給我示例代碼或幫助我創建這個listview？謝謝。

class OrganizationList extends StatefulWidget{
  const OrganizationList({Key? key}) : super(key: key)。

  @override 
  _OrganizationListState createState() => _OrganizationListState()。
}

class _OrganizationListState extends State< OrganizationList> {
  late Future<ListAlbum> futureAlbum;

  @override
  void initState() {
    super.initState（）。
    futureAlbum = listData()。
  }

  @override.
  Widget build(BuildContext context) {
    return Scaffold(
      身體。中心(
        child: FutureBuilder<ListAlbum>(
          future: futureAlbum,
          構建者。(context, snapshot) {
            if (snapshot.hasData) {
              print（快照.資料）。
              return Text(snapshot.data!.fullName);
              // return Text(snapshot.data!.officeID.toString()); // in this line error shows. type 'String' in not a subtype of type 'int' 
            } else if （snapshot.hasError） {
              return Text('${snapshot.error}'/span>)。
            }
            return const CircularProgressIndicator（）。
          },
        ),
      ),
    );
  }
}

Future<ListAlbum> listData() async {
  final token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9. eyJzdWIiOjI4OTksImlzcyI6Imh0dHBzOi8vcG9ydGFsLWFwaS5qb21ha2hhdGEuY29tL2FwaS9hdXRoL2xvZ2luIwiaWF0IjoxNjI5NTI2OTc1LCJleHAiOjE2Mjk2MTMzNzUsIm5iZiI6MTYyOTUyNjk3NSwianRpIjoiRktiT295eEYwaEpDUXMxdiJ9. o4eM_C4hlluHe9Azk0MspPJtYZ7agdpFA6xwKiijLj8'。
  String url =
      'https://portal-api.jomakhata.com/api/getOrganizationData?token=${token}'。

  Dio dio = new Dio（）。
  dio.options.headers['Content-Type'] = 'application/json'。
  final body = {'limited': 10, 'orderBy': 'idEmployee'/span>, 'orderType'/span>: 'DESC'}。
  final response = await dio.post（url, data: body）。

  if (response.statusCode == 200) {
    print（response.statusCode）。
    print(response.data);
    var data = ListAlbum.fromJson(response.data["data"]["data"][0] ）。)
    return data。
  } else {
    throw Exception('Failed!')。
  }

uj5u.com熱心網友回復：

基于你的json資料，你的officeID是一個字串"officeID": "1003559",

但是在ListAlbum中，該屬性被定義為一個整數 final int officeID;

將ListAlbum中的final int officeID;改變為final String officeID;

并且.toString()不再需要。

按照OP的要求編輯，以獲得更多的幫助：

謝謝你。我明白了。我的問題是什么。這對我來說是一個愚蠢的錯誤。你能幫助我在Scaffold中創建listview以顯示這些資料嗎？

Future<List<ListAlbum>> listData() async {
  final token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9. eyJzdWIiOjI4OTksImlzcyI6Imh0dHBzOi8vcG9ydGFsLWFwaS5qb21ha2hhdGEuY29tL2FwaS9hdXRoL2xvZ2luIwiaWF0IjoxNjI5NTI2OTc1LCJleHAiOjE2Mjk2MTMzNzUsIm5iZiI6MTYyOTUyNjk3NSwianRpIjoiRktiT295eEYwaEpDUXMxdiJ9. o4eM_C4hlluHe9Azk0MspPJtYZ7agdpFA6xwKiijLj8'。
  String url =
      'https://portal-api.jomakhata.com/api/getOrganizationData?token=${token}'。

  Dio dio = new Dio（）。
  dio.options.headers['Content-Type'] = 'application/json'。
  final body = {'limited': 10, 'orderBy': 'idEmployee'/span>, 'orderType'/span>: 'DESC'}。
  final response = await dio.post（url, data: body）。

  if (response.statusCode == 200) {
    print（response.statusCode）。
    print(response.data);
    List<Map<String,dynamic> > data = response. data["data"]["data"] 。
    List<ListAlbum> albums = data.map((json) => ListAlbum.fromJson(json)).toList()。

    
    return albums;
  } else {
    throw Exception('Failed!') 。
  }

接著編輯你的FutureBuilder<ListAlbum>為FutureBuilder<List<ListAlbum>>并回傳一個Listview.builder。關于如何使用Listview.builder的更多資訊 https://flutter.dev/docs/cookbook/lists/long-lists

標籤：

上一篇：C#如何在串列視圖中添加<list>字串

下一篇：Flutter頁面的速度太慢，當它包含長資料時