Question

我正在从一个 api 构建一个新闻列表，该列表具有下一页结果，如所附图像所示。 api 只有两页，每页有 10 个列表项。

数据正在传递到小部件。我的问题是，当我向下滚动视图时，它从第一页加载了相同的 10 个列表项。

//newsModal.dart
class NewsNote {
  String banner_image;
  String title;
  String text;
  String sport;

  NewsNote(this.banner_image, this.title, this.text, this.sport);

  NewsNote.fromJson(Map<String, dynamic> json) {
    banner_image = json['banner_image'];
    title = json['title'];
    text = json['text'];
    sport = json['sport'];
  }

}
//page news
import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:jabboltapp/models/newsModal.dart';

class JabNews extends StatefulWidget {
  @override
  _JabNewsState createState() => _JabNewsState();
}

class _JabNewsState extends State<JabNews> {
  ScrollController _scrollController = ScrollController();
  bool isLoading = false;

  String url = "https://jabbolt.com/api/news";

  List<NewsNote> _newsNotes = List<NewsNote>();

  Future<List<NewsNote>> fetchNewsNotes() async {
    if (!isLoading) {
      setState(() {
        isLoading = true;
      });

      var response = await http.get(url);

      var newsNotes = List<NewsNote>();

      if (response.statusCode == 200) {
        url = jsonDecode(response.body)['next'];
        var newsNotesJson = json.decode(response.body)["results"];
        for (var newsNoteJson in newsNotesJson) {
          newsNotes.add(NewsNote.fromJson(newsNoteJson));
        }
        setState(() {
          isLoading = false;
          _newsNotes.addAll(newsNotes);
        });
      } else {
        setState(() {
          isLoading = false;
        });
      }
      return newsNotes;
    }
  }

  @override
  void initState() {
    fetchNewsNotes().then((value) {
      setState(() {
        _newsNotes.addAll(value);
      });
    });
    this.fetchNewsNotes();
    super.initState();
    _scrollController.addListener(() {
      if (_scrollController.position.pixels ==
          _scrollController.position.maxScrollExtent) {
        fetchNewsNotes();
      }
    });
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  Widget _buildProgressIndicator() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Center(
        child: Opacity(
          opacity: isLoading ? 1.0 : 00,
          child: CircularProgressIndicator(),
        ),
      ),
    );
  }

  Widget _buildList() {
    return ListView.builder(
      itemBuilder: (BuildContext context, int index) {
        if (index == _newsNotes.length) {
          return _buildProgressIndicator();
        } else {
          return Padding(
            padding: EdgeInsets.all(8.0),
            child: Card(
              child: ListTile(
                title: Text((_newsNotes[index].title)),
                onTap: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => DetailPage(_newsNotes[index])));
                },
              ),
            ),
          );
        }
      },
      controller: _scrollController,
      itemCount: _newsNotes.length,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: dGrey,
      appBar: AppBar(
        title: Text(
          "News",
          style: TextStyle(
            color: textGrey,
            fontFamily: 'bison',
            fontSize: 32.0,
            letterSpacing: 1.2,
          ),
        ),
        backgroundColor: Colors.transparent,
        elevation: 0,
      ),
      body: Container(
        child: _buildList(),
      ),
    );
  }
}

Answer 1

需要在URL中添加页码连接 https://jabbolt.com/api/news?page=2

滚动时颤动分页加载与第一页相同的数据

1 个答案: