api 12 及以上，不定期更新
1.基本使用
可滚动的容器组件，只允许存在一个子组件容器。
当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。如代码1。
// 代码1
build() {
Column() {
Scroll() {
//只允许有一个子组件
Column() {
}
.width("100%")
.backgroundColor("#000")
// 不允许更多 ...
// Column(){
//
// }
// .width("100%")
}
.width("100%")
}
.width("100%")
.height("100%")
}
2.相关问题
2.1 内容超出了但还是无法滚动
设置了 scroll 内的 子组件容器高度为 100% 或其他固定高度将导致scroll 不能滑动，如代码2
//代码2
Scroll() {
//只允许有一个子组件
Column() {
// 模拟内容的高度
Column() {
Text("头部")
Blank() // 占据中间的空间
Text("底部")
}
.width("100%")
.height(1500)
}
.width("100%")
.height("100%") //设置 scroll 的子组件容器高度为 100% 将导致不能滑动
//.layoutWeight(1) // 权重也是一样
}
.width("100%")
.height("100%")
2.2 scroll 内容超出scroll 大小时显示不全 / 内容不足一屏时自动剧中显示
1.内容超出时显示不全，需给scroll 显示设置高度，如 .height(300) 或 .layoutWeight(1)，此时可以显示完整内容。
2.显示设置了高度 或 权重之后，内容不满足 scroll 高度时内容自动剧中。不需要自动剧中则给scroll 设置 .align(Alignment.Top) 以修改内容排序方式
build() {
//模拟其他页面中的其他内容
Column() {
Text("我是标题")
.width("100%")
.height(180)
.textAlign(TextAlign.Center)
.backgroundColor("#0f0")
.padding({ top: 30 })
//需要额外套一层Column 来保证 scroll 内容不足一屏时不剧中显示
Scroll() {
//只允许有一个子组件
Column() {
// 模拟内容的高度
Column() {
Text("头部")
Blank()
Text("底部")
}
.width("100%")
.height(300) // .height(200)
.backgroundColor("#ff0")
}
.width("100%")
.backgroundColor("#0f0")
//.height("100%") // 显示设置高度将不能滑动
}
.align(Alignment.Top) // 内容排序方式，顶部显示，默认是剧中
.width("100%")
.layoutWeight(1) // 显示设置高度已确保内容显示完整
.backgroundColor("#00f")
}
.width("100%")
.height("100%")
}
