解决鸿蒙scroll不能滚动,及scroll中内容一直居中的问题

解决鸿蒙scroll滚动及内容居中问题

代码实现是scroll中包column组件,发现column中的内容一直在页面居中显示的,如图
在这里插入图片描述
将column高度设置为100%后解决了这个问题,但是当column中内容长度超出屏幕时,发现不能滚动

最终解决方案:
使用stack组件包裹Scroll,将scroll的高度设置给stack,并设置stack的alignContent属性为Alignment.TopStart,不给column设置高度

    Stack() {
      Scroll() {
        Column() {}
      }.width('100%')
    }.width('100%').height('100%').alignContent(Alignment.TopStart)

参考来源:
https://blog.youkuaiyun.com/qq_34081612/article/details/142856045

### 鸿蒙系统中 Scroll 组件实现横向滑动示例 在鸿蒙系统开发中,`Scroll` 组件可以通过设置其属性 `scrollable` 为 `ScrollDirection.Horizontal` 来实现横向滑动功能。以下是一个完整的代码示例,展示如何使用 `Scroll` 组件实现横向滑动效果[^3]。 ```typescript @Entry @Component struct ScrollHorizontalExample { @State message: string = 'Hello World'; scroller: Scroller = new Scroller() build() { Column() { // 定义横向滚动区域 Scroll(this.scroller) { Row({ space: 20 }) { // 使用 Row 布局来排列子组件 Actor() // 子组件1 Actor() // 子组件2 Actor() // 子组件3 Actor() // 子组件4 Actor() // 子组件5 } .height(200) // 设置滚动内容的高度 .backgroundColor(Color.Orange) // 设置背景颜色 } .height(200) // 设置 Scroll 组件的高度 .width('100%') // 设置 Scroll 组件的宽度 .backgroundColor(Color.Pink) // 设置 Scroll 组件的背景颜色 .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) // 设置组件背景颜色 } } ``` 上述代码中,`Scroll` 组件通过 `.scrollable(ScrollDirection.Horizontal)` 属性实现了横向滑动功能[^3]。同时,还提供了两个按钮用于手动控制滚动方向,分别调用 `this.scroller.scrollEdge(Edge.Start)` 和 `this.scroller.scrollEdge(Edge.End)` 方法实现滚动到左右边缘的功能。 ### 注意事项 - 在实际开发中,如果需要监听滚动事件,可以绑定 `onScroll` 回调函数。但需要注意的是,`onScroll` 是一个频繁触发的回调,因此应尽量减少其中的耗时操作和冗余逻辑,例如避免过多的日志打印或复杂的计算[^2]。 - 如果需要动态调整滚动位置,可以通过 `Scroller` 对象提供的方法(如 `scrollBy` 或 `scrollTo`)实现更灵活的滚动控制[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值