如何使用 SingleChildScrollView 滚动到 Flutter 中的特定小部件

Question

我有一个主屏幕和第二屏幕。当主屏幕中的抽屉项目单击时。它应该移动到 SecondScreen Container 小部件。但如何做到这一点呢？

我已经为 SecondScreen SingleChildScrollView 设置了 ScrollController 。但如何移动到某个小部件呢？

1. 在 SecondScreen 中创建一个滚动到小部件的方法？
2. 如果我有第三个屏幕需要相同的功能怎么办？

SecondScreen.dart

import 'package:flutter/material.dart';
  ScrollController scrollController = ScrollController();
  var containerKey = GlobalKey();
class SecondScreen extends StatefulWidget {

  final Key widgetKey;

  const SecondScreen({Key key, this.widgetKey}) : super(key: key);

  @override
  State<SecondScreen> createState() => _SecondScreenState();
}

class _SecondScreenState extends State<SecondScreen> {

@override
  void initState() {
    // TODO: implement initState
    super.initState();
Scrollable.ensureVisible(
    widget.widgetKey,
    duration: const Duration(milliseconds: 400),
    curve: Curves.easeInOut,
);
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        controller: scrollController,
        child: Column(
          children: [
            Text('hi'),
            Container(
              color: Colors.red,
              height: 1000,
            ),
            Container(
              color: Colors.green,
              height: 1000,
            ),
            Container(
              key: containerKey,
              color: Colors.green,
              height: 1000,
            ),
          ],
        ),
      ),
    );
  }
}

主屏幕.dart

import 'package:flutter/material.dart';
import 'package:stackoverflow_check/scrollcheck/second_screen.dart';

class MainScreen extends StatelessWidget {
  const MainScreen({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      drawer: Drawer(
        child: ListView(
          children: [
            TextButton(
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (context) => SecondScreen(widgetKey: containerKey),
                  ),
                );
                //scrollController.an
              },
              child: Text('click'),
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

主屏幕

class MainScreen extends StatelessWidget {
  const MainScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      drawer: Drawer(
        child: ListView(
          children: [
            TextButton(
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (context) => SecondScreen(widgetNum: 2),
                  ),
                );
                //scrollController.an
              },
              child: Text('click'),
            )
          ],
        ),
      ),
    );
  }
}

第二屏

class SecondScreen extends StatefulWidget {
  final int widgetNum;
  const SecondScreen({Key? key, required this.widgetNum}) : super(key: key);

  @override
  State<SecondScreen> createState() => _SecondScreenState();
}

class _SecondScreenState extends State<SecondScreen> {
  ScrollController scrollController = ScrollController();
  var containerKey = GlobalKey();
  var container2Key = GlobalKey();
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  void didChangeDependencies() {
    // TODO: implement didChangeDependencies
    super.didChangeDependencies();
    Future.delayed(Duration(milliseconds: 100), () {
      if (widget.widgetNum == 1) {
        Scrollable.ensureVisible(
          containerKey.currentContext!,
          duration: const Duration(milliseconds: 400),
          curve: Curves.easeInOut,
        );
      } else {
        Scrollable.ensureVisible(
          container2Key.currentContext!,
          duration: const Duration(milliseconds: 400),
          curve: Curves.easeInOut,
        );
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        controller: scrollController,
        child: Column(
          children: [
            Text('hi'),
            Container(
              color: Colors.red,
              height: 1000,
            ),
            Container(
              color: Colors.green,
              height: 1000,
            ),
            Container(
              key: containerKey,
              color: Colors.green,
              height: 1000,
            ),
            Container(
              key: container2Key,
              color: Colors.blue,
              height: 1000,
            ),
          ],
        ),
      ),
    );
  }
}