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

Question

我正在使用SingleChildScrollView，其scrollDirection设置为水平方向，并在其中放置了超过20个子小部件以嵌套在Row Widget中。我想在Row中以编程方式滚动到一个位置的widget（即第5或第6个位置）。有没有办法以编程方式实现这一点？

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

- Sasank Sunkavalli

---

调用 Scrollable.ensureVisible 方法即可。 - pskink

Answer 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);
              });
            },
          )
        ],
      ),
    );
  }
}

- bluenile

---

如果SingleChildScrollView是另一个可滚动小部件的子级，则ensureVisible将在两个轴上滚动。 - spydon

有没有办法防止两个轴向的滚动（即只允许水平方向滚动）？ - MoonKillCZ

Answer 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)
  }

- Stefano Amorelli

---

这个解决方案提供了按给定宽度滚动的方法，但我需要按位置滚动。上面接受的答案解决了我的问题。 - Sasank Sunkavalli

如果有其他人想知道，使用上述技巧滚动到末尾的方法是：_scrollController.jumpTo(_scrollController.positions.last.maxScrollExtent)。 - Stefan

Answer 3

这也可以在无状态的小部件中完成，通过在构建方法中触发它。使用addPostFrameCallback确保滚动是在渲染完成后执行的。您需要为选择的value添加状态管理。但是你可以选择使用GetX、StatefulWidget或其他任何方式。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

class MyHomePage extends StatelessWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

  static final List<GlobalKey> _key = List.generate(20, (index) => GlobalKey());
  final List<Widget> buttons = List.generate(
    20,
    (index) => ElevatedButton(
      onPressed: () {},
      style: ButtonStyle(backgroundColor: MaterialStateProperty.resolveWith((_)=> index % 2 == 0 ? Colors.lightGreen : Colors.orange)),
      child: Text("Button No # ${index + 1}", key: _key[index]),
    ),
  );

  @override
  Widget build(BuildContext context) {
    final thisWidget = Scaffold(
      appBar: AppBar(
        title: Text(title!),
      ),
      body: Column(
        children: [
          SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: buttons,
            ),
          ),
          DropdownButton(
            value: 0,
            items: List.generate(
              20,
              (index) => DropdownMenuItem(
                  value: index,
                  child: Text("Goto Button # ${index + 1}")),
            ),
            onChanged: (value) {
              if (value != null) {
                WidgetsBinding.instance
                  .addPostFrameCallback((_) => Scrollable.ensureVisible(_key[value].currentContext!));
              }
            },
          )
        ],
      ),
    );
    WidgetsBinding.instance
      .addPostFrameCallback((_) => Scrollable.ensureVisible(_key[15].currentContext!));
    return thisWidget;
  }
}

- Sudeep Prasad

Answer 4

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

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

- Shubham Prajapati