3

我正在构建一个简单的消息传递系统，用户将在其中看到消息列表。

我有一个带有 reverse:true 的 ListView.Builder，因为我希望列表在加载消息页面时显示在底部。

当他们下拉滚动到顶部时，我希望出现一个刷新指示器，以便他们可以加载以前的消息，就像大多数流行的聊天应用程序一样。

但是，由于列表中有 reverse:true，他们必须在使用 RefreshIndicator 时在屏幕底部向上拉以加载以前的消息。

有没有办法在使用 reverse:true 时下拉而不是上拉时触发 RefreshIndicator？

4

1 回答 1

0

In my opinion,do you want to load more at the bottom of the listview,i think you just need to add one load more view to the last item of the listview,like the following code:

import 'package:flutter/material.dart';
import 'dart:async';


void main() {
  runApp(new MaterialApp(
    home: new Scaffold(
      body: new LoadMoreListView(enableLoadMore: true, count: 30,),
    ),
  ));
}

class LoadMoreListView extends StatefulWidget {

  bool enableLoadMore;
  int count;

  LoadMoreListView({this.enableLoadMore = true, this.count = 15});

  @override
  State<StatefulWidget> createState() {
    return new LoadMoreListViewState();
  }

}

class LoadMoreListViewState extends State<LoadMoreListView> {

  ScrollController _scrollController = new ScrollController();
  bool isRequesting = false;

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(() {
      if (_scrollController.position.pixels ==
          _scrollController.position.maxScrollExtent) {
        ///load more when the listView attached the bottom
        loadMore();
      }
    });
  }

  Future<Null> loadMore() async {
    if (isRequesting) {
      ///if is requesting ,return the next action
      return null;
    }
    setState(() {
      isRequesting = true;
    });

    ///loading your data from any where,eg:network
    return null;
  }

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

  @override
  Widget build(BuildContext context) {
    return new ListView.builder(
        itemCount: _count(),
        itemBuilder: _buildItem);
  }

  _count() {
    if (widget.enableLoadMore) {
      return widget.count + 1;
    }
    return widget.count;
  }

  Widget _buildItem(BuildContext context, int index) {
    if (index == widget.count) {
      return _buildLoadMoreView();
    }
    return new Container(
      height: 36.0,
      child: new Center(
        child: new Text("I am the $index item"),
      ),
    );
  }

  Widget _buildLoadMoreView() {
    return new Padding(
      padding: const EdgeInsets.all(8.0),
      child: new Center(
        child: new Opacity(
          opacity: 1.0,
          child: new CircularProgressIndicator(),
        ),
      ),
    );
  }

}
于 2018-07-23T14:54:48.443 回答