Flutter：滚动到ListView中的小部件

Z时代
2024-01-10
分类：问答

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

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

回答：

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

问题是ListView不会渲染不可见的项目。这意味着你的目标很可能不会建 在所有 。这意味着你的目标将没有context;

阻止您在无需进行其他工作的情况下使用该方法。

最后，最简单的解决方案是将您ListView的替换为，SingleChilScrollView然后将您的孩子打包成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"),
      ),
    );
  }
}