如何在 Flutter 中自动滚动到 SingleChildScrollView 内的行的位置

Posted 2023-02-23

【中文标题】如何在 Flutter 中自动滚动到 SingleChildScrollView 内的行的位置

【英文标题】：How to Automaticallly scroll to a position of a Row inside SingleChildScrollView in Flutter

【发布时间】：2021-03-21 01:31:34

【问题描述】：

我正在使用 SingleChildScrollView。它的 scrollDirection 设置为 Horizo​​ntal ，其中 >20 个子小部件放置在 Row Widget 内。我想以编程方式滚动到行中的位置小部件（即第 5 或第 6 位置）。有没有办法以编程方式做到这一点？

SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: Row(
      children: buttons,
    ),
  )

【问题讨论】：

然后调用Scrollable.ensureVisible方法

【参考方案1】：

最简单的方法是使用Scrollable.ensureVisible。

ensureVisible 方法

滚动包含给定的滚动条 上下文，以便使给定的上下文可见。

请看下面的代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  


class MyHomePage extends StatefulWidget 
  const MyHomePage(Key key, this.title) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();


class _MyHomePageState extends State<MyHomePage> 
  int _value = 0;
  static final List<GlobalKey> _key = List.generate(20, (index) => GlobalKey());
  final List<Widget> buttons = List.generate(
    20,
    (index) => RaisedButton(
      onPressed: () ,
      color: index % 2 == 0 ? Colors.grey : Colors.white,
      child: Text("Button No # $index + 1", key: _key[index]),
    ),
  );

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: buttons,
            ),
          ),
          DropdownButton(
            value: _value,
            items: List.generate(
              20,
              (index) => DropdownMenuItem(
                  child: Text("Goto Button # $index + 1"), value: index),
            ),
            onChanged: (value) 
              setState(() 
                _value = value;
                print("calling");
                Scrollable.ensureVisible(_key[value].currentContext);
              );
            ,
          )
        ],
      ),
    );
  

【参考方案2】：

你可以定义一个ScrollController:

ScrollController _controller = new ScrollController();

将其传递给SingleChildScrollView:

SingleChildScrollView(
    controller: _scrollController,
    scrollDirection: Axis.horizontal,
    child: Row(
      children: buttons,
    ),
  ),

并以编程方式滚动如下：

void scroll(double position) 
 _scrollController.jumpTo(position);

或者，如果需要滚动动画：

void scrollAnimated(double position) 
 _scrollController.animateTo(position, Duration(seconds: 1), Curves.ease);

如果您想在布局构建后立即自动滚动，您可以通过覆盖 initState 方法来实现：

  @override
  void initState() 
    super.initState();
    WidgetsBinding.instance
        .addPostFrameCallback((_) => scroll(500)); // scroll automatically  500px (as an example)
  

【讨论】：

这个解决方案提供了一种按给定宽度滚动的方法，我需要的是按位置滚动。上面接受的答案解决了我的目的。

【参考方案3】：

您可以在 SingleChildScrollView 中添加 ScrollController 并滚动到您想要的特定位置

_scrollController.animateTo(
           //here specifing position= 100 mean 100px
                      100,
                      curve: Curves.ease,
                      duration: Duration(seconds: 1),