出现滚动的前提条件,当子组件内容超过父组件的宽度或者高度
4.0文档 文档中心
build() {
Column() {
Row() {
Text('顶部')
.textAlign(TextAlign.Center)
.width('100%')
}
.width('100%')
.height(50)
.backgroundColor(Color.Red)
Column() {
}
.width('100%')
.height(this.mHeight)
.backgroundColor(Color.Blue)
Row() {
Text('底部')
.textAlign(TextAlign.Center)
.width('100%')
}
.width('100%')
.height(50)
.backgroundColor(Color.Orange)
}
.justifyContent(FlexAlign.SpaceBetween)
.width('100%')
.height('100%')
.onAreaChange((old: Area, newArea: Area) => {
this.mHeight=(newArea.height as number) - 100
})
}
}
.onAreaChange((old: Area, newArea: Area) => {
})
onAreaChange用于监听区域变化并作出相应的响应
通过日志打印我们可以看到里面的参数
创建滚动内容:
// 创建组件 ScrollItem
@Component
struct ScrollItem {
build() {
Row() {
Text('滚动内容')
}
.width('100%')
.height(100)
.backgroundColor(Color.Yellow)
.borderRadius(10)
.margin({
top: 10,
bottom:10
})
.justifyContent(FlexAlign.Center)
}
}
Scroll() {
// 只能有一个组件
Column() {
ScrollItem()
ScrollItem()
ScrollItem()
ScrollItem()
ScrollItem()
ScrollItem()
ScrollItem()
ScrollItem()
ScrollItem()
ScrollItem()
ScrollItem()
ScrollItem()
ScrollItem()
}
}
.width('100%')
.height(this.mHeight)
.backgroundColor(Color.Blue)
鼠标按下 即可上下滚动
-----------------
控制滚动
Scroller:可滚动容器组件的控制器,可以将此组件绑定至容器组件,然后通过它控制容器组件的滚动,同一个控制器不可以控制多个容器组件,目前支持List,Scroll,ScrollBar,Grid,waterFlow.
使用方法:
//导入对象
@State scroller: Scroller = new Scroller()
Scroll(this.scroller) {}
//绑定事件
Row() {
}
.onClick(()=>{
//向上移动一段距离 xOffset,yOffset 必填项
this.scroller.scrollTo({
xOffset:0,
yOffset:1000,
animation:{ // 设置滚动时长
duration:10000,
curve: Curve.Smooth //滚动曲线设置
}
})
this.scroller.scrollEdge(Edge.Bottom) //滚动到底部
this.scroller.scrollEdge(Edge.Top) //滚动到顶部
})
标签:滚动,100%,Next,width,ScrollItem,组件,height,Scroll
From: https://blog.csdn.net/qq_59347596/article/details/136753978