Flutter:滚动到 ListView 中的小部件

Question

如何滚动到 ListView 中的特殊小部件？例如，如果我按下特定按钮，我想自动滚动到 ListView 中的某个 Container。

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

Answer 1

到目前为止，最简单的解决方案是使用 Scrollable.ensureVisible(context) .因为它为您做所有事情并适用于任何小部件尺寸。使用 GlobalKey 获取上下文。

问题是 ListView 不会呈现不可见的项目。这意味着您的目标很可能不会被构建。这意味着您的目标将没有 context ；阻止您在没有更多工作的情况下使用该方法。

最后，最简单的解决方案是将您的 ListView 替换为 SingleChildScrollView 并将您的 child 包装到 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, width: double.infinity, child: new Card()),
            new SizedBox(height: 160.0, width: double.infinity, child: new Card()),
            // 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 一起工作；虽然这需要更多的工作。