Flutter如何创建列表视图自动滚动？答案

【问题标题】：Flutter how to create List view autoscrolling?Flutter如何创建列表视图自动滚动？
【发布时间】：2019-11-03 06:14:01
【问题描述】：

我正在尝试制作一个自动滚动到最新数据点的 ListView。我厌倦了通过创建一个使用 .jumpTo 方法的 _scrollToBottom 函数来做到这一点。

但我在应用程序中看到一个空白屏幕，并且 'child.parentData != null': is not true. 在调试控制台中。

关于如何实现自动滚动有什么建议吗？

这是我当前代码的相关部分：

ScrollController _scrollController = ScrollController();

_scrollToBottom(){  _scrollController.jumpTo(_scrollController.position.maxScrollExtent);
}

@override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: DataShareWidget.of(context).stream,
      builder: (BuildContext context, AsyncSnapshot snapshot){
        if(snapshot.hasError){ return Text(snapshot.error);}
        if(snapshot.hasData){
          _dataFormat(snapshot.data);
          return ListView.builder(
            itemCount: _listViewData.length,
            controller: _scrollController,
            reverse: true,
            shrinkWrap: true,
            itemBuilder: (context, index) {
              _scrollToBottom();
              return ListTile(
                title: AutoSizeText(_listViewData[index], maxLines: 2),
                dense: true,
              );
            },
          );
        }
      }
    );
  }

【问题讨论】：

请尝试title: AutoSizeText(_listViewData[index] == null ? 'Loading..' : _listViewData[index] , maxLines: 2)

标签： flutter dart autoscroll flutter-listview

【解决方案1】：

您需要在列表完全构建后调用_scrollToBottom() 方法。

修改是你的代码（没有 StreamBuilder）：

      ScrollController _scrollController = ScrollController();
    
      _scrollToBottom() {
        _scrollController.jumpTo(_scrollController.position.maxScrollExtent);
      }
      
      @override
      void initState() {
        super.initState();
      }
    
      @override
      Widget build(BuildContext context) {
        WidgetsBinding.instance.addPostFrameCallback((_) => _scrollToBottom()); 
        return Scaffold(
          body: ListView.builder(
            itemCount: 50,
           // itemCount: _listViewData.length,
            controller: _scrollController,
            reverse: true,
            shrinkWrap: true,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('Yo Dummy Text $index'),
                // title: AutoSizeText(_listViewData[index], maxLines: 2),
                dense: true,
              );
            },
          ),
        );
      }

【讨论】：

我进行了编辑，在您批准后将其标记为正确答案。每次构建时都需要调用 PostFrameCallback。为了让它工作，我只是将它从 initState 函数移到了构建函数

【解决方案2】：

你需要做到这一点并且完美地工作......

  ScrollController _scrollController = ScrollController();
  
  @override
  Widget build(BuildContext context) {
    _scrollController.animateTo(_scrollController.position.maxScrollExtent, duration: Duration(milliseconds: 200), curve: Curves.easeOut);
    return StreamBuilder(
      stream: stream = Firestore.instance
          .collection('your collaction')
          .document('your document')
          .snapshots(),
      builder: (context, snapshot) {
        return snapshot.hasData
            ? ListView.builder(
                controller: _scrollController,
                shrinkWrap: true,
                itemCount: snapshot.data.documents.length,
                itemBuilder: (context, index) =>
                    msgTile(snapshot.data.documents[index], user1),
              )
            : Text('Loading...');
      },
    );
  }

【讨论】：

【解决方案3】：

问题出在您的 StreamBuilder 代码中。如果快照尚未准备好，您需要返回一些东西。试试这个代码：

ScrollController _scrollController = ScrollController();

_scrollToBottom(){  _scrollController.jumpTo(_scrollController.position.maxScrollExtent);
}

@override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: DataShareWidget.of(context).stream,
      builder: (BuildContext context, AsyncSnapshot snapshot){
        if(snapshot.hasError){ return Text(snapshot.error);}
        if(snapshot.hasData){
          _dataFormat(snapshot.data);
          return ListView.builder(
            itemCount: _listViewData.length,
            controller: _scrollController,
            reverse: true,
            shrinkWrap: true,
            itemBuilder: (context, index) {
              _scrollToBottom();
              return ListTile(
                title: AutoSizeText(_listViewData[index], maxLines: 2),
                dense: true,
              );
            },
          );
        }
        //Something waiting the snapshot
        return CircularProgressIndicator();
      }
    );
  }

【讨论】：