HarmonyOS 鸿蒙Next 纵向 Divider 高度问题

发布于 1周前 作者 h691938207 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 纵向 Divider 高度问题 如下这个 Divider ， 没加它时界面 Row() 内显示两个文本很 OK，高度为两个文本的高度和

加入纵向 Divider 后这个 Divider 很高，怎么控制它的高度跟随 Row() 的内容高度，而不是撑很高

Row() {
 Divider()
 .vertical(true)
 .strokeWidth(3)
 .color("#24686666")
 .margin({ left: 5, top: 5, bottom: 5 })
 .constraintSize({ maxHeight: '100%' })

 Column() {
 // 名称
 Text(this.itemViewModel.quoteMsgSender)//todo: + text_nickname + text_
 .fontSize(11)
 .fontColor("#787878")
 .margin({ left: 10 })
 .constraintSize({ maxWidth: '100%' })
 .maxLines(1)

 // 被引用内容 三存一
 if (this.itemViewModel.quoteTextVisible) {
 Text(this.itemViewModel.quoteText)
 .fontSize(11)
 .fontColor("#5E7763")
 .margin({ left: 10, top: 2 })
 .maxLines(2)
 .ellipsisMode(EllipsisMode.END)
 .textOverflow({
 overflow: TextOverflow.Ellipsis
 }).constraintSize({ maxWidth: '100%' })
 }

 if (this.itemViewModel.quoteImgVisible) {
 Image(this.itemViewModel.quoteImgUrl)//.backgroundImage(this.defalutImg)
 //.backgroundImageSize(ImageSize.FILL)
 .alt($r('app.media.im_load_error_pic'))
 .objectFit(ImageFit.Cover)
 .width(this.itemViewModel.quoteImgWidth)
 .height(this.itemViewModel.quoteImgHeight)//.constraintSize({ minWidth: '16%', maxWidth: '40%'})
 .borderRadius(3)
 .margin({ left: 10, top: 2 })
 .onError((e) => {
 this.loadError = true;
 })
 .onComplete(() => {
 this.loadError = false;
 })
 }

 if (this.itemViewModel.quoteStickerVisible) {
 Image(this.itemViewModel.quoteStickerUrl)
 .alt($r('app.media.im_ic_emoticon_placehoder'))
 .objectFit(ImageFit.Cover)
 .width(90)
 .height(90)//.constraintSize({ minWidth: '16%', maxWidth: '40%'})
 .margin({ left: 10, top: 2 })
 .onError((e) => {
 this.loadError = true;
 })
 .onComplete(() => {
 this.loadError = false;
 })
 }
 }.alignItems(HorizontalAlign.Start).padding(5)
}.alignItems(VerticalAlign.Top)

更多关于HarmonyOS 鸿蒙Next 纵向 Divider 高度问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

参考以下代码：

@Entry
@Component
struct Index1 {
  @State message: string = 'Hello World';
  @State lineHeight:number = 0

  build() {
    Row() {
      Divider()
        .vertical(true)
        .strokeWidth(3)
        .color("#e137e518")
        .backgroundColor(Color.Green)
        .margin({ left: 5, top: 5, bottom: 5 })
        .height(this.lineHeight)
        .constraintSize({ maxHeight: '100%' })

      Column() {
        //名称
        Text('32fsdfsdfsfdghdfhfghfgj')//todo: + text_nickname + text_
          .fontSize(11)
          .fontColor("#787878")
          .margin({ left: 10 })
          .constraintSize({ maxWidth: '100%' })
          .maxLines(1)

        // 被引用内容 三存一
        if (1) {
          Text('this.itemViewModel.quoteText')
            .fontSize(11)
            .fontColor("#5E7763")
            .margin({ left: 10, top: 2 })
            .maxLines(2)
            .ellipsisMode(EllipsisMode.END)
            .textOverflow({
              overflow: TextOverflow.Ellipsis
            }).constraintSize({ maxWidth: '100%' })
        }
      }
      .alignItems(HorizontalAlign.Start)
      .padding(5)
      .onAreaChange((oldValue: Area, newValue: Area) => {
        let lineHeight = newValue.height as number
        this.lineHeight = lineHeight>0?lineHeight:0
      })
    }
    .backgroundColor(Color.Brown)
    .alignItems(VerticalAlign.Top)
  }
}

更多关于HarmonyOS 鸿蒙Next 纵向 Divider 高度问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对HarmonyOS 鸿蒙Next中纵向Divider高度问题，以下是专业且直接的回答：

在HarmonyOS中，纵向Divider的高度通常由其父容器的布局管理以及Divider自身的属性设置共同决定。如果遇到纵向Divider高度不符合预期的问题，可以尝试以下几种方法：

  1. 检查父容器布局：确保父容器使用的是支持纵向排列的布局，如VerticalLayout。同时，检查父容器的高度设置，确保它没有被限制或固定，从而影响Divider的高度。

  2. Divider属性设置：虽然Divider本身的高度属性在HarmonyOS中可能不直接可设置（因为Divider通常用于分隔，其高度由系统或主题决定），但可以尝试通过自定义样式或主题来调整Divider的外观，间接影响其视觉效果。

  3. 使用Spacing或其他组件：如果Divider的高度调整确实受限，可以考虑使用Spacing组件或其他具有可调节高度属性的组件来达到类似的分隔效果。

  4. 检查样式和主题：确保当前应用的样式和主题没有覆盖或修改了Divider的默认行为。

如果以上方法均未能解决纵向Divider高度问题，请考虑检查具体的代码实现和布局文件，或查阅HarmonyOS官方文档以获取更多信息。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部