前言
在移动应用中，滚动是处理内容溢出的基本方式。“海风日记“的写日记页面使用Scroll包裹正文输入区域，配合layoutWeight(1)实现自适应高度滚动，确保在不同屏幕尺寸下都能正常显示。
本文将从源码出发，深入讲解 Scroll 组件的使用、layoutWeight 的权重分配以及滚动条控制。
一、Scroll 的基本用法
1.1 源码
Column() { // 顶部导航 Row() { ... } // 渐变选择区 Column() { ... } // 波浪分隔 Shape() { ... } // 正文滚动区 Scroll() { Column() { TextArea({...}) Text(`${this.diaryText.length} 字`) } } .layoutWeight(1) // 占据剩余空间 .scrollBar(BarState.Off) // 隐藏滚动条 }1.2 Scroll 的核心属性
| 属性 | 值 | 说明 |
|---|---|---|
layoutWeight | 1 | 占据父容器剩余空间 |
scrollBar | BarState.Off | 隐藏滚动条 |
scrollable | 默认 | 垂直滚动 |
二、layoutWeight 的布局原理
2.1 布局计算
Column 总高度 = 100% ├── 顶部导航: 56vp ├── 渐变选择区: 自适应 ├── 波浪分隔: 20vp ├── Scroll: layoutWeight(1) = 剩余空间 └── 底部工具栏: 60vp2.2 权重分配
layoutWeight(1)让 Scroll 占据父容器中除固定高度子组件外的剩余空间：
Column() { Row().height(56) // 固定高度 Column() // 自适应 Shape().height(20) // 固定高度 Scroll().layoutWeight(1) // 占据剩余空间 Row().height(60) // 固定高度 }三、Scroll 的滚动控制
3.1 滚动条
.scrollBar(BarState.Off) // 隐藏 .scrollBar(BarState.Auto) // 自动显示 .scrollBar(BarState.On) // 始终显示3.2 滚动方向
Scroll() { ... } // 默认为垂直滚动 // .scrollable(ScrollDirection.Horizontal) // 水平滚动 // .scrollable(ScrollDirection.Vertical) // 垂直滚动 // .scrollable(ScrollDirection.Both) // 双向滚动四、Scroll 与 TextArea 的配合
TextArea 本身支持内部滚动，但在 Scroll 中需要正确处理：
Scroll() { Column() { TextArea({...}) .constraintSize({ minHeight: 300 }) // 最小高度 } } .layoutWeight(1)五、常见问题与排查
5.1 Scroll 不滚动
问题：Scroll 包裹的内容超出了容器，但无法滚动。
原因：Scroll 没有设置layoutWeight，高度为 0。
解决方案：为 Scroll 设置layoutWeight(1)或固定高度。
5.2 滚动条一直显示
问题：设置了scrollBar(BarState.Off)但滚动条仍然显示。
原因：属性设置顺序错误或属性被覆盖。
解决方案：确保scrollBar在布局属性之后设置。
总结
本文通过“海风日记“写日记页面，深入讲解了 Scroll 和 layoutWeight 的用法：
- Scroll 组件：包裹可滚动内容
- layoutWeight：占据剩余空间
- 滚动条控制：隐藏、自动、始终显示
- 与 TextArea 配合：最小高度控制
下一篇文章将深入讲解波浪 Shape 分隔的实现，敬请期待。
如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！
相关资源：
- Scroll 组件文档
- layoutWeight 属性文档
- TextArea 组件文档
- 海风日记项目源码
- [HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs
- 开源鸿蒙跨平台社区
