竖直方向上,RelativeContainer height设置auto,高度由子组件撑开,可滑动;如果常规情况下RelativeContainer 具备宽高,子元素又脱离文档流,这种情况下外套scroll可能会出现未知错误,这种情况下推荐使用其他容器组件替代布局。@Entry @Component struct Index { scroller: Scroller = new Scroller; build() { Scroll(this.scroller) { RelativeContainer() { Row().width(100).height(500) .backgroundColor("#FF3333") .id("row1") Row() .width(100) .height(500) .backgroundColor("#FFCC00") .alignRules({ left: { anchor: "row1", align: HorizontalAlign.End }, top: { anchor: "row1", align: VerticalAlign.Top } }) .id("row2") Row() .width(100) .height(500) .backgroundColor("#FF6633") .alignRules({ left: { anchor: "row1", align: HorizontalAlign.Start }, top: { anchor: "row1", align: VerticalAlign.Bottom } }) .id("row3") Row() .width(100) .height(500) .backgroundColor("#FF9966") .alignRules({ left: { anchor: "row3", align: HorizontalAlign.End }, top: { anchor: "row2", align: VerticalAlign.Bottom } }) .id("row4") } .width("auto").height("auto") .margin({ left: 50 }) .border({ width: 2, color: "#6699FF" }) } .backgroundColor(Color.Yellow) .height('50%') // .edgeEffect(EdgeEffect.Spring) .scrollSnap({snapAlign:ScrollSnapAlign.START, snapPagination:400, enableSnapToStart:true, enableSnapToEnd:true}) } }
竖直方向上,RelativeContainer height设置auto,高度由子组件撑开,可滑动;如果常规情况下RelativeContainer 具备宽高,子元素又脱离文档流,这种情况下外套scroll可能会出现未知错误,这种情况下推荐使用其他容器组件替代布局。