加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

flutter – 以编程方式滚动到ListView的末尾

发布时间:2020-12-14 14:58:28 所属栏目:百科 来源:网络整理
导读:我有一个可滚动的ListView,其中项目的数量可以动态更改.每当将新项添加到列表的末尾时,我想以编程方式将ListView滚动到最后. (例如,聊天消息列表,其中可以在最后添加新消息) 我的猜测是我需要在State对象中创建一个ScrollController并将其手动传递给ListView
我有一个可滚动的ListView,其中项目的数量可以动态更改.每当将新项添加到列表的末尾时,我想以编程方式将ListView滚动到最后. (例如,聊天消息列表,其中可以在最后添加新消息)

我的猜测是我需要在State对象中创建一个ScrollController并将其手动传递给ListView构造函数,以便稍后我可以在控制器上调用animateTo()/ jumpTo()方法.但是,由于我无法轻易确定最大滚动偏移量,因此似乎不可能简单地执行scrollToEnd()类型的操作(而我可以轻松地传递0.0以使其滚动到初始位置).

有没有一种简单的方法来实现这一目标?

使用reverse:true对我来说不是一个完美的解决方案,因为当ListView视口中只有少量项目时,我希望项目在顶部对齐.

解决方法

如果你使用一个收缩包装的ListView with reverse:true,将它滚动到0.0将完成你想要的.

import 'dart:collection';

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Example',home: new MyHomePage(),);
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Widget> _messages = <Widget>[new Text('hello'),new Text('world')];
  ScrollController _scrollController = new ScrollController();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Container(
          decoration: new BoxDecoration(backgroundColor: Colors.blueGrey.shade100),width: 100.0,height: 100.0,child: new Column(
            children: [
              new Flexible(
                child: new ListView(
                  controller: _scrollController,reverse: true,shrinkWrap: true,children: new UnmodifiableListView(_messages),),],floatingActionButton: new FloatingActionButton(
        child: new Icon(Icons.add),onPressed: () {
          setState(() {
            _messages.insert(0,new Text("message ${_messages.length}"));
          });
          _scrollController.animateTo(
            0.0,curve: Curves.eaSEOut,duration: const Duration(milliseconds: 300),);
        }
      ),);
  }
}

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读