使用分页Flutter附加数据列表视图

当单击按钮获取更多数据时,如何追加数据lisview ?。我的当前代码仅用新数据刷新。谢谢。 我的code

Demo image

zzt360997 回答:使用分页Flutter附加数据列表视图

您可以添加fullPhotos以保留所有照片
在原始API代码中,在每个页面上返回重复数据
因为在此API的定义中,_start是数字而不是页面
因此您需要更改该部分以适合您的要求

代码段

Future<List<Photo>> fetchPhotos(http.Client client,int page) async {
  print('page la' + page.toString());
  final response = await client.get(
      'https://jsonplaceholder.typicode.com/photos?_start=' +
          page.toString() +
          '&_limit=2');

  var val = await compute(parsePhotos,response.body);
  print('val.lenght ${val.length}');
  fullPhotos.addAll(val);
  print('fullPhotos  ${fullPhotos.length}');
  return fullPhotos;
}

List<Photo> fullPhotos = [];

工作演示

enter image description here

完整代码

import 'dart:async';
import 'dart:convert';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

Future<List<Photo>> fetchPhotos(http.Client client,response.body);
  print('val.lenght ${val.length}');
  fullPhotos.addAll(val);
  print('fullPhotos  ${fullPhotos.length}');
  return fullPhotos;
}

List<Photo> fullPhotos = [];
// A function that will convert a response body into a List<Photo>
List<Photo> parsePhotos(String responseBody) {
  final parsed = json.decode(responseBody).cast<Map<String,dynamic>>();

  return parsed.map<Photo>((json) => Photo.fromJson(json)).toList();
}

class Photo {
  final int albumId;
  final int id;
  final String title;
  final String url;
  final String thumbnailUrl;

  Photo({this.albumId,this.id,this.title,this.url,this.thumbnailUrl});

  factory Photo.fromJson(Map json) {
    return Photo(
      albumId: json['albumId'] as int,id: json['id'] as int,title: json['title'] as String,url: json['url'] as String,thumbnailUrl: json['thumbnailUrl'] as String,);
  }
}

void main() {
  runApp(new MaterialApp(
    home: new MyApp(),));
}

class MyApp extends StatefulWidget {
  @override
  _State createState() => new _State();
}

class _State extends State<MyApp> {
  //final String title;
  // MyHomePage({Key key,this.title}) : super(key: key);
  int page = 0;
  void _onPressed() {
    setState(() {
      page = page + 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Demo get data'),),body: Container(
        child: Column(
          children: <Widget>[
            RaisedButton(
                onPressed: _onPressed,child: new Text('Get more data')),Expanded(
              child: Padding(
                child: FutureBuilder<List<Photo>>(
                  future: fetchPhotos(http.Client(),page),builder: (context,snapshot) {
                    if (snapshot.hasError) print(snapshot.error);
                    return snapshot.hasData
                        ? PhotosList(photos: snapshot.data)
                        : Center(child: CircularProgressIndicator());
                  },padding: EdgeInsets.fromLTRB(1.0,10.0,1.0,10.0),)
          ],);
  }
}

class PhotosList extends StatelessWidget {
  final List<Photo> photos;

  PhotosList({Key key,this.photos}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: photos.length,itemBuilder: (context,index) {
        return Column(
          children: <Widget>[
            Container(
                margin: EdgeInsets.all(10),color: Colors.white10,alignment: Alignment.center,child: Card(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,children: <Widget>[
                      ListTile(
                        leading: Image.network(
                          photos[index].thumbnailUrl,fit: BoxFit.fitWidth,title: Text(photos[index].title),subtitle: Text(photos[index].title),ButtonTheme.bar(
                        // make buttons use the appropriate styles for cards
                        child: ButtonBar(
                          children: <Widget>[
                            FlatButton(
                              child: const Text('Open'),onPressed: () {/* ... */},],)),);
      },);
  }
}
本文链接:https://www.f2er.com/3152887.html

大家都在问