页面的内容超出屏幕大小而无法完全显示时,该怎么办

页面的内容超出屏幕大小而无法完全显示时,该怎么办?

当页面的内容超出屏幕的大小时,我们可以使用滚动条包裹Column,实现竖向滚动展示的效果。

HarmonyOS
2024-05-26 12:40:42
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
anlan001

使用的核心API

使用的接口Scroller,接口详情可参考:滚动条

调用的方法:

  •  .scrollable(ScrollDirection.Vertical) // 滚动方向纵向
  •  .scrollBar(BarState.On) // 滚动条常驻显示
  •  .scrollBarColor(Color.Gray) // 滚动条颜色
  •  .scrollBarWidth(10) // 滚动条宽度
  •  .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹

核心代码解释

//页面的内容超出屏幕大小而无法完全显示时,可以使用滚动条来进行拖动展示 
@Entry 
@Component 
struct ScrollExample { 
  scroller: Scroller = new Scroller(); //创建滚动条 
  private arr: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'L', 'J', 'K', 'M', 'N'];  //创建字符串数组 
  
  build() { 
    Scroll(this.scroller) { //使用滚动条包裹Column,实现竖向滚动展示的效果 
      Column() {  //Column容器实现子元素在竖直方向上的布局 
        ForEach(this.arr, (item: string) => { //遍历字符串数组 
          Text(item) 
            .width('90%') 
            .height(100) 
            .backgroundColor(Color.Brown) 
            .borderRadius(15) 
            .fontSize(60) 
            .fontColor(Color.Yellow) 
            .textAlign(TextAlign.Center) 
            .margin({ top: 10 }) 
        }) 
      }.width('100%') 
    } 
    .backgroundColor(0xDCDCDC) 
    .scrollable(ScrollDirection.Vertical) // 滚动方向纵向 
    .scrollBar(BarState.On) // 滚动条常驻显示 
    .scrollBarColor(Color.Gray) // 滚动条颜色 
    .scrollBarWidth(10) // 滚动条宽度 
    .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹 
  } 
}

实现效果

分享
微博
QQ
微信
回复
2024-05-27 16:23:39
相关问题
运行应用提示如下内容怎么办啊?
921浏览 • 1回复 待解决
for .in 语法不支持,怎么办啊?
377浏览 • 1回复 待解决
最新RNOH启动报错 ,怎么办啊?
528浏览 • 1回复 待解决
无法使用hdc命令怎么办
1796浏览 • 1回复 待解决
安装动态库失败,怎么办啊?
235浏览 • 1回复 待解决
怎么办啊?
358浏览 • 1回复 待解决
状态栏设置颜色失效怎么办啊?
673浏览 • 1回复 待解决
字符串资源引用出错,怎么办啊?
329浏览 • 1回复 待解决
redis 内存满了怎么办
2579浏览 • 3回复 待解决
Gradle的依赖缓存被损坏怎么办
12573浏览 • 5回复 待解决
中奖码忘了保存怎么办
4204浏览 • 1回复 待解决
npm install -g serialport出错怎么办
13940浏览 • 5回复 待解决
xml没有自动补全,要怎么办
6641浏览 • 3回复 待解决