如何在Scaffold塊中的FutureBuilder中實作listview.builder？

我想在串列視圖中添加我的資料。 我也試著用這個https://flutter.dev/docs/cookbook/lists/long-lists

我在futureAlbum中得到了資料，快照也有資料。但我不能在listView.builder中轉換這些資料。因此，如何在FutureBuilder中實作listview？

body。Center(
        孩子。FutureBuilder<ListAlbum>(
          future: futureAlbum,
          建設者。(context, snapshot) {
            if (snapshot.hasData) {
              print（快照.資料）。
              return Text(snapshot.data!.idEmployee.toString()); //在這個部分我想添加listview。
            } else if （snapshot.hasError） {
              return Text('${snapshot.error}'/span>)。
            }
            return const CircularProgressIndicator（）。
          },
        ),
      ),

呼叫api的完整代碼

class OrganizationList 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!.idEmployee.toString()); //在這個部分我想添加listview。
            } else if （snapshot.hasError） {
              return Text('${snapshot.error}'/span>)。
            }
            return const CircularProgressIndicator（）。
          },
        ),
      ),
    );
  }
}


class ListAlbum{
  final int idEmployee;
  final String avatar;
  final String fullName;
  final String 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']。
    );
  }
}

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 = {'limit': 5, '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熱心網友回復：

首先，你已經將所有的成員ListAlbum標記為必需的，但是你在回應中的一些結果并不具備所有這些，例如第二行沒有avatar。你可以通過將這些欄位標記為非必需來解決這個問題，就像這樣（我在這里讓所有成員都是可選的--根據你的需要進行調整）：

class ListAlbum { final int? idEmployee; final String? avatar; final String? fullName; final String? officeID; final String? email。 final String? designation; final String? department; final String? mobileNumber; final String? workStation; final String? businessUnit; ListAlbum({ this.idEmployee, this.avatar, this.fullName, this.officeID。 this.email, this.designation, this.部門。 this.mobileNumber, this.workStation, 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']。 ); } }

接下來，轉換你的listData函式，以便它將回傳一個list的ListAlbum物件。你可以從你的回應中抓取資料，轉換并回傳，就像這樣：

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 = {'limit': 5, 'orderBy': 'idEmployee'/span>, 'orderType'/span>: 'DESC'}。 final response = await dio.post（url, data: body）。 if (response.statusCode == 200) { print（response.statusCode）。 print(response.data); return response.data["data"]["data"] .map<ListAlbum>((json) => ListAlbum.fromJson(json)) .toList()。 } else { throw Exception('Failed!')。 }

最后，改變未來的回傳型別，從這個串列中創建ListView，這是一個例子，調整一下：

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

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

  @override.
  Widget build(BuildContext context) {
    return Scaffold(
        身體。中心(
      孩子。FutureBuilder<List<ListAlbum>> (
        future: futureAlbum,
        構建者。(context, snapshot) {
          if (snapshot.hasData) {
            print（快照.資料）。

            return ListView.builder(
              itemCount: snapshot.data!.length,
              itemBuilder。(context, index) {
                最終 ListAlbum item = snapshot.data![index];
                return ListTile(
                  領導。Text(item.idEmployee.toString())。
                  標題。Text(item.fullName!),
                  副標題。Text(item.designation!)。
                  尾數。Text(item.businessUnit!)。
                );
              },
            );
          } else if （snapshot.hasError） {
            return Text('${snapshot.error}') 。
          }
          return const CircularProgressIndicator（）。
        },
      ),
    ));
  }

...我不知道token是否是一個秘密，但如果它是，你應該撤銷它。

uj5u.com熱心網友回復：

試試這個：

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 = {'limit': 5, '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<ListAlbum> _list=response.data["data"]["data"].map（（e）=>ListAlbum.fromJson（e））.toList（）。
  
    return _list;
  } else {
    throw Exception('Failed!')。
  }

和你的小部件到這：

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

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

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

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

  @override.
  Widget build(BuildContext context) {
    return Scaffold(
      身體。中心(
        孩子。FutureBuilder<List<ListAlbum>> (
          future: futureAlbum,
          構建者。(context, snapshot) {
            if (snapshot.hasData) {
              print（快照.資料）。
              return Column(
              children:[
                for(ListAlbum item in snapshot.data)
                   Text(item.idEmployee.toString())]）。)
     //Or you can also use listview.builder here instead of column, but this will work for proof of concept.
            } else if （snapshot.hasError） {
              return Text('${snapshot.error}'/span>)。
            }
            return const CircularProgressIndicator（）。
          },
        ),
      ),
    );
  }
}

標籤：

上一篇：Xamarin表格。如何在ListView周圍添加一個邊框？

下一篇：在ListView的頂部分離并顯示優先專案？(釘住專案的功能)