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

Question

我有一个主屏幕和第二个屏幕。当主屏幕中的抽屉项单击时。它应该移动到SecondScreen容器小部件。但是怎么做呢?

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

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

mainscreen.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'),
)
],
),
),
);
}
}

SecondScreen

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