鸿蒙Scroll布局,横向与纵向

注意，当横向scroll时，直接子元素的宽，不能100%，

当纵向scroll时，直接子元素的高，不能100%

1、纵向代码：

方法1：用数值计算，来设置中间的高度：

@Entry
@Component
struct ScrollCase {@State message: string = 'Hello World';@State middleHeigh: number = 0;build() {Column() {Row() {}.height(50).width('100%').backgroundColor(Color.Blue)Column(){}.width('100%').height(this.middleHeigh).backgroundColor(Color.Orange)Row() {}.height(50).width('100%').backgroundColor(Color.Red)}.justifyContent(FlexAlign.SpaceBetween) //两端对齐.width('100%').height('100%').onAreaChange((old: Area, newArea: Area) => { //界面渲染时会被调用this.middleHeigh=(newArea.height as number) - 100})}
}

效果：

完全效果：

代码：

@Entry
@Component
struct ScrollCase {@State message: string = 'Hello World';@State middleHeigh: number = 0;scroller:Scroller =new Scroller()build() {Column() {Row() {}.height(50).width('100%').backgroundColor(Color.Blue).onClick(()=>{this.scroller.scrollEdge(Edge.Bottom)})Scroll(this.scroller){Column(){ScrollItem()ScrollItem()ScrollItem()ScrollItem()ScrollItem()ScrollItem()ScrollItem()ScrollItem()ScrollItem()ScrollItem()}}.scrollBarColor(Color.Red).width('100%').height(this.middleHeigh).backgroundColor(Color.Orange)Row() {}.height(50).width('100%').backgroundColor(Color.Red).onClick(()=>{this.scroller.scrollEdge(Edge.Top)})}.justifyContent(FlexAlign.SpaceBetween) //两端对齐.width('100%').height('100%').onAreaChange((old: Area, newArea: Area) => { //界面渲染时会被调用this.middleHeigh=(newArea.height as number) - 100})}
}@Component
struct ScrollItem {build() {Row(){Text("滚动区域内容").backgroundColor(Color.White)}.justifyContent(FlexAlign.Center).width('100%').height(80).backgroundColor(Color.Pink).margin(10)}
}

Scroller对Scorll进行控制滑动到顶、或底

2、横向滚动，效果：

代码：

@Entry
@Component
struct ScrollCase02 {@State message: string = 'Hello World';scroller: Scroller = new Scroller()build() {Column() {Scroll(this.scroller) {Row({ space: 20 }) {Actor()Actor()Actor()Actor()Actor()Actor()Actor()Actor()Actor()}.height(200).backgroundColor(Color.Orange)}.height(200).width('100%').backgroundColor(Color.Pink).scrollable(ScrollDirection.Horizontal)Row() {Button("滚动左边").onClick(() => {this.scroller.scrollEdge(Edge.Start)})Button("滚动右边").onClick(() => {this.scroller.scrollEdge(Edge.End)})}}.justifyContent(FlexAlign.Center).height('100%').width('100%').backgroundColor(Color.Pink)}
}@Component
struct Actor {build() {Row() {Text("热辣滚烫--贾玲").fontColor(Color.White)}.width(100).height(180).backgroundColor(Color.Red)}
}