Flutter 中，SingleChildScrollView（类比Android中的ScrollView） 是一个可以滚动单个子控件的小部件。当子控件的大小超过视图时，用户可以滚动以查看所有内容。SingleChildScrollView 通常用于创建可滚动的表单、列表或任何需要垂直或水平滚动的内容。类似于Android中的ScrollView，不过它只能接收一个子组件。
SingleChildScrollView构造方法
const SingleChildScrollView({
super.key,
this.scrollDirection = Axis.vertical,
this.reverse = false,
this.padding,
this.primary,
this.physics,
this.controller,
this.child,
this.dragStartBehavior = DragStartBehavior.start,
this.clipBehavior = Clip.hardEdge,
this.restorationId,
this.keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
}) 注意primary属性：
/// {@macro flutter.widgets.scroll_view.primary}
final bool? primary;
primary属性如果为true，表示是否使用 widget 树中默认的PrimaryScrollController。
//如果primary为null。（controller为null && ）
final bool effectivePrimary = primary
?? controller == null && PrimaryScrollController.shouldInherit(context, scrollDirection);
final ScrollController? scrollController = effectivePrimary
? PrimaryScrollController.maybeOf(context)
: controller;SingleChildScrollView中内容不应该超过屏幕太多，否则会影响性能，因为SingleChildScrollView不支持基于 Sliver 的延迟加载模型，所以内容超出屏幕尺寸太多时，使用SingleChildScrollView将会非常昂贵（性能差），应该使用一些支持Sliver延迟加载的可滚动组件，如ListView。
基础用法
通过SingleChildScrollView 包裹一个可能超出视图尺寸的子控件
import 'dart:math' as math;
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
/// 滑动到指定位置 GlobalKey 版本
/// 基于 SingleChildScrollView 和 Column
class ScrollToIndexDemoPage2 extends StatefulWidget {
const ScrollToIndexDemoPage2({super.key});
@override
_ScrollToIndexDemoPageState2 createState() => _ScrollToIndexDemoPageState2();
}
class _ScrollToIndexDemoPageState2 extends State<ScrollToIndexDemoPage2> {
//测试数据
String realStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("ScrollToIndexDemoPage2"),
),
body: SingleChildScrollView(
padding: EdgeInsets.all(16.0),
child: Center(
child: Column(
children: realStr
.split("")
.map((c) => Text(
c,
textScaleFactor: 2.0,
))
.toList(),
),
),
),
);
}
}
通过 GlobalKey实现滑动到指定位置（SingleChildScrollView + Column）
GlobalKey的使用
GlobalKey：一个特殊的键，在整个应用范围内唯一的键，与构建的Widget树中的一个特定Element关联。
GlobalKey的作用：
1.操作或获取某个状态类（如StatefulWidget）内部状态
如果需要直接操作或获取某个状态类（如StatefulWidget）内部状态时，可以为(State)创建并分配一个GlobalKey。通过调用GlobalKey.currentState来获取关联的State对象，然后执行方法或改变状态。
2.局部刷新
如果要在不重建整个树的情况下更新单个Widget，当Widget的状态变化时，使用GlobalKey获取State,然后调用State.setState()来触发其自身的重建。
3.查找Widget
通过GlobalKey可以在Widget树中找到特定的Widget或者Element。
4.维持Widget的持久性
Flutter的热重载机制，拥有GlobalKey的Widget在重新加载时不会被销毁，而是保持原有的状态。
import 'dart:math' as math;
import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
class ScrollToIndexDemoPage2 extends StatefulWidget {
const ScrollToIndexDemoPage2({super.key});
//GlobalKey<_ScrollToIndexDemoPageState2> testKey = GlobalKey<_ScrollToIndexDemoPageState2>();
@override
_ScrollToIndexDemoPageState2 createState() => _ScrollToIndexDemoPageState2();
}
class _ScrollToIndexDemoPageState2 extends State<ScrollToIndexDemoPage2> {
GlobalKey scrollKey = GlobalKey();
ScrollController controller = ScrollController();
List<ItemModel> dataList = [];
//测试数据
//String realStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
@override
void initState() {
dataList.clear();
for (int i = 0; i < 100; i++) {
dataList.add(ItemModel(i));
}
super.initState();
}
_scrollToIndex() {
var key = dataList[12];
///获取 renderBox
RenderBox renderBox =
key.globalKey.currentContext!.findRenderObject() as RenderBox;
///获取位置偏移，基于 ancestor: SingleChildScrollView 的 RenderObject()
double dy = renderBox
.localToGlobal(Offset.zero,
ancestor: scrollKey.currentContext!.findRenderObject())
.dy;
///计算真实位移
var offset = dy + controller.offset;
if (kDebugMode) {
//print("*******$offset");
}
controller.animateTo(offset,
duration: const Duration(milliseconds: 500), curve: Curves.linear);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("ScrollToIndexDemoPage2"),
),
// body: SingleChildScrollView(
// padding: EdgeInsets.all(16.0),
// child: Center(
// child: Column(
// children: realStr
// .split("")
// .map((c) => Text(
// c,
// textScaleFactor: 2.0,
// ))
// .toList(),
// ),
// ),
// ),
body: SingleChildScrollView(
key: scrollKey,
scrollDirection: Axis.vertical,
controller: controller,
child: Column(
children: dataList.map<Widget>((data) {
return CardItem(data, key: dataList[data.index].globalKey);
}).toList(),
),
),
persistentFooterButtons: <Widget>[
TextButton(
onPressed: () async {
_scrollToIndex();
},
child: const Text("Scroll to 12"),
),
],
);
}
}
// class _CustomWidgetState extends State<> {
//
// }
class CardItem extends StatelessWidget {
final random = math.Random();
final ItemModel data;
CardItem(this.data, {super.key});
@override
Widget build(BuildContext context) {
return Card(
child: Container(
height: (300 * random.nextDouble()),
alignment: Alignment.centerLeft,
child: Container(
margin: const EdgeInsets.all(5),
child: Text("Item ${data.index}"),
),
),
);
}
}
class ItemModel {
///这个key是关键
GlobalKey globalKey = GlobalKey();
///可以添加你的代码
final int index;
ItemModel(this.index);
}
