HarmonyOS Scroll组件使用问题

这边需要用在页面放很多的Text，TextInput，Button，发现页面放不下这么多，所以应该用 scroll，按照HarmonyOS文档的scroll超过一个屏幕的话就没法儿顺利滚动。https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-scroll-V5文档中scroll的示例都是内嵌了List来实现的超过一屏幕的展示，但是示例比较麻烦，并不是能用 List 来统一处理。所以需求是一堆不同的UI控件放在scroll上，超过一屏幕时可以自由滚动。
HarmonyOS
zxjiu
2024-10-18 10:31:19
浏览
回答 1
待解决
回答 1
按赞同
按时间
Heiang
请参看demo:
import hilog from '@ohos.hilog';  
import router from '@ohos.router';  
@Entry  
@Component  
struct SendTextMessageImplPage {  
  @State targetId: string = "";  
  @State txtContent: string = "文本消息，来自HarmonyOS";  
  @State txtExtra: string = "extra from harmony";  
  @State pushTitle: string = "pushTitle from Harmony";  
  @State pushContent: string = "pushContent from Harmony";  
  @State pushData: string = "pushData from Harmony";  
  scroller: Scroller = new Scroller();  
  aboutToAppear(): void {  
  }  
  build() {  
    Navigation() {  
      Scroll(this.scroller) {  
        Column() {  
          Button("填充单聊数据", { type: ButtonType.Normal })  
            .fontSize(25)  
            .margin(10)  
            .fontWeight(FontWeight.Bold)  
            .onClick(() => {  
              this.fillPrivateData();  
            })  
          Button("填充群聊数据", { type: ButtonType.Normal })  
            .fontSize(25)  
            .margin(10)  
            .fontWeight(FontWeight.Bold)  
            .onClick(() => {  
              this.fillGroupData();  
            })  
          Text(`会话类型`)  
            .width('95%')  
            .fontColor("#FF0000")  
            .padding(10)  
          TextInput({ placeholder: '请输入会话类型'})  
            .showUnderline(true)  
            .width(380)  
            .padding(10)  
            .onChange((value: string) => {  
            })  
          Text(`会话 id`)  
            .width('95%')  
            .fontColor("#FF0000")  
            .padding(10)  
          TextInput({ placeholder: '请输入会话 id', text: this.targetId })  
            .showUnderline(true)  
            .width(380)  
            .padding(10)  
            .onChange((value: string) => {  
              this.targetId = value;  
            })  
          Text(`文本消息内容`)  
            .width('95%')  
            .fontColor("#FF0000")  
            .padding(10)  
          TextInput({ placeholder: '文本消息内容', text: this.txtContent })  
            .showUnderline(true)  
            .width(380)  
            .padding(10)  
            .onChange((value: string) => {  
              this.txtContent = value;  
            })  
          Text(`文本消息 extra`)  
            .width('95%')  
            .fontColor("#FF0000")  
            .padding(10)  
          TextInput({ placeholder: '文本消息 extra', text: this.txtExtra })  
            .showUnderline(true)  
            .width(380)  
            .padding(10)  
            .onChange((value: string) => {  
              this.txtExtra = value;  
            })  
          // todo @ 信息，和用户信息  
          Text(`pushTitle`)  
            .width('95%')  
            .fontColor("#FF0000")  
            .padding(10)  
          TextInput({ placeholder: 'pushTitle', text: this.pushTitle })  
            .showUnderline(true)  
            .width(380)  
            .padding(10)  
            .onChange((value: string) => {  
              this.pushTitle = value;  
            })  
          Text(`pushContent`)  
            .width('95%')  
            .fontColor("#FF0000")  
            .padding(10)  
          TextInput({ placeholder: 'pushContent', text: this.pushContent })  
            .showUnderline(true)  
            .width(380)  
            .padding(10)  
            .onChange((value: string) => {  
              this.pushContent = value;  
            })  
          Text(`pushData`)  
            .width('95%')  
            .fontColor("#FF0000")  
            .padding(10)  
          TextInput({ placeholder: 'pushData', text: this.pushData })  
            .showUnderline(true)  
            .width(380)  
            .padding(10)  
            .onChange((value: string) => {  
              this.pushData = value;  
            })  
          Button("发送消息，并分别通过 uid 和 id 获取该消息", { type: ButtonType.Normal })  
            .fontSize(10)  
            .margin(10)  
            .fontWeight(FontWeight.Bold)  
            .onClick(() => {  
              this.sendMessage();  
            })  
          Text("")  
            .width('95%')  
            .fontColor("#FF0000")  
            .padding(10)  
          Button("填充单聊数据", { type: ButtonType.Normal })  
            .fontSize(25)  
            .margin(10)  
            .fontWeight(FontWeight.Bold)  
            .onClick(() => {  
              this.fillPrivateData();  
            })  
          Button("填充群聊数据", { type: ButtonType.Normal })  
            .fontSize(25)  
            .margin(10)  
            .fontWeight(FontWeight.Bold)  
            .onClick(() => {  
              this.fillGroupData();  
            })  
          Text(`会话类型`)  
            .width('95%')  
            .fontColor("#FF0000")  
            .padding(10)  
          TextInput({ placeholder: '请输入会话类型'})  
            .showUnderline(true)  
            .width(380)  
            .padding(10)  
            .onChange((value: string) => {  
            })  
          Text(`会话 id`)  
            .width('95%')  
            .fontColor("#FF0000")  
            .padding(10)  
          TextInput({ placeholder: '请输入会话 id', text: this.targetId })  
            .showUnderline(true)  
            .width(380)  
            .padding(10)  
            .onChange((value: string) => {  
              this.targetId = value;  
            })  
          Text(`文本消息内容`)  
            .width('95%')  
            .fontColor("#FF0000")  
            .padding(10)  
          TextInput({ placeholder: '文本消息内容', text: this.txtContent })  
            .showUnderline(true)  
            .width(380)  
            .padding(10)  
            .onChange((value: string) => {  
              this.txtContent = value;  
            })  
          Text(`文本消息 extra`)  
            .width('95%')  
            .fontColor("#FF0000")  
            .padding(10)  
          TextInput({ placeholder: '文本消息 extra', text: this.txtExtra })  
            .showUnderline(true)  
            .width(380)  
            .padding(10)  
            .onChange((value: string) => {  
              this.txtExtra = value;  
            })  
          // todo @ 信息，和用户信息  
          Text(`pushTitle`)  
            .width('95%')  
            .fontColor("#FF0000")  
            .padding(10)  
          TextInput({ placeholder: 'pushTitle', text: this.pushTitle })  
            .showUnderline(true)  
            .width(380)  
            .padding(10)  
            .onChange((value: string) => {  
              this.pushTitle = value;  
            })  
          Text(`pushContent`)  
            .width('95%')  
            .fontColor("#FF0000")  
            .padding(10)  
          TextInput({ placeholder: 'pushContent', text: this.pushContent })  
            .showUnderline(true)  
            .width(380)  
            .padding(10)  
            .onChange((value: string) => {  
              this.pushContent = value;  
            })  
          Text(`pushData`)  
            .width('95%')  
            .fontColor("#FF0000")  
            .padding(10)  
          TextInput({ placeholder: 'pushData', text: this.pushData })  
            .showUnderline(true)  
            .width(380)  
            .padding(10)  
            .onChange((value: string) => {  
              this.pushData = value;  
            })  
          Button("发送消息，并分别通过 uid 和 id 获取该消息", { type: ButtonType.Normal })  
            .fontSize(10)  
            .margin(10)  
            .fontWeight(FontWeight.Bold)  
            .onClick(() => {  
              this.sendMessage();  
            })  
          Text("")  
            .width('95%')  
            .fontColor("#FF0000")  
            .padding(10)  
          Button("填充单聊数据", { type: ButtonType.Normal })  
            .fontSize(25)  
            .margin(10)  
            .fontWeight(FontWeight.Bold)  
            .onClick(() => {  
              this.fillPrivateData();  
            })  
          Button("填充群聊数据", { type: ButtonType.Normal })  
            .fontSize(25)  
            .margin(10)  
            .fontWeight(FontWeight.Bold)  
            .onClick(() => {  
              this.fillGroupData();  
            })  
          Text(`会话类型`)  
            .width('95%')  
            .fontColor("#FF0000")  
            .padding(10)  
          TextInput({ placeholder: '请输入会话类型'})  
            .showUnderline(true)
2024-10-18 14:02:12
如何写精华回答，获更多曝光？
发布
51CTO

51CTO博客

51CTO学堂

HarmonyOS Scroll组件使用问题

订阅鸿蒙技术特刊，精选内容抢先看
