flutter – Listview滚动到小部件

前端之家收集整理的这篇文章主要介绍了flutter – Listview滚动到小部件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何滚动到列表视图中的特殊小部件?
例如,如果我按下特定按钮,我想自动滚动到ListView中的某个Container.

new ListView(children: <Widget>[
             new Container(...),new Container(...),#scroll for example to this container 
             new Container(...)
      ]);

解决方法

到目前为止,最简单的解决方案是使用Scrollable.ensureVisible(context).因为它可以为您完成所有工作并使用任何小部件大小.使用GlobalKey获取上下文.

问题是ListView不会呈现不可见的项目.这意味着您的目标很可能根本不会被构建.这意味着你的目标没有上下文;在没有更多工作的情况下阻止您使用该方法.

最后,最简单的解决方案是通过SingleChilScrollView替换ListView并将子项包装到Column中.示例:

class ScrollView extends StatelessWidget {
  final dataKey = new GlobalKey();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      primary: true,appBar: new AppBar(
        title: const Text('Home'),),body: new SingleChildScrollView(
        child: new Column(
          children: <Widget>[
            new SizedBox(height: 160.0,width: double.infinity,child: new Card()),new SizedBox(height: 160.0,// destination
            new Card(
              key: dataKey,child: new Text("data\n\n\n\n\n\ndata"),)
          ],bottomNavigationBar: new RaisedButton(
        onPressed: () => Scrollable.ensureVisible(dataKey.currentContext),child: new Text("Scroll to data"),);
  }
}

注意:虽然这允许轻松滚动到所需的项目,但请考虑此方法仅适用于小的预定义列表.至于更大的列表,你会遇到性能问题.

但是可以使Scrollable.ensureVisible与ListView一起工作;虽然这需要更多的工作.

猜你在找的Flutter相关文章