HarmonyOS list中item数据显示效果不一致

item代码如下:

@Preview
@Component
export struct SwitchSettingItem {
  @ObjectLink setting: MessageSettingListModel
  @ObjectLink model: MessageSettingListModel
  @Prop vm: NotificationSettingPageViewModel
  @State isON: boolean = false
  aboutToAppear(): void {
    this.isON = (this.model.status == 1)
  }

  build() {
    Row() {
      Column() {
        Text(this.model.msgTypeName)
          .attributeModifier(deepalTextT16)
        Text(this.model.remark)
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .attributeModifier(deepalTextT14)
          .fontColor(deepalTheme.color.text.secondary)
          .margin({
            top: SpaceSize.Space4,
          })
      }.layoutWeight(1)
      .alignItems(HorizontalAlign.Start)
      // Blank().layoutWeight(1)
      Row() {
        Toggle({
          type: ToggleType.Switch,
          isOn: this.isON
        })
      }.margin({
        left: SpaceSize.BlockHorizonSpace3
      }).onClick(() => {
        if (!this.isON && this.setting.status != 1) {
          showConfirmDialog({
            title: $r('app.string.mine_settings_notice_label'),
            subTitle: $r('app.string.goto_system_setting_page_to_modify_str'),
            confirmText: $r('app.string.goto_str'),
            onConfirm: () => {
              DeepalRouter.pop()
              toSettingPageByUri(APPINFO_URI, AppUtil.getContext())
            },
            onCancel: () => {
              DeepalRouter.pop()
            }
          })
        } else {
          let tempStatus = this.model.status
          this.model.status = this.isON ? 2 : 1
          showLoading()
          this.vm.changeStatus(this.model).then((data) => {
            if (!data) { //接口成功
              this.model.status = tempStatus
              this.isON = !this.isON
            }
          }, (e: object) => {
            this.model.status = tempStatus
          }).finally(() => {
            dismissLoading()
          })
        }
      }).onTouchIntercept((event: TouchEvent) => {
        return HitTestMode.Block //拦截点击事件, 否则会直接触发switch的切换
      })
    }.padding({
      top: SpaceSize.Space5,
      bottom: SpaceSize.Space5,
    })
  }
}
HarmonyOS
2025-01-09 16:19:12
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
fox280

建议优先组合wordBreak属性设置为WordBreak.BREAK_ALL方式实现字母为单位进行截断,参考链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-text-V5#textoverflow

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column() {
      SwitchSettingItem({
        title: '通知-TEST3',
        description: '开启后,将收到官网活动等相关通知-TEST3。壹壹壹壹壹壹壹壹壹壹壹壹壹壹壹壹'
      })
      SwitchSettingItem({
        title: '购车-TEST3',
        description: '开启后,将收到购车订单相关通知-TEST3。壹壹壹壹壹壹壹壹壹壹壹壹壹壹壹壹'
      })
      SwitchSettingItem({
        title: '其他-TEST3',
        description: '开启后,将收到充电、维保等服务通知-TEST3。壹壹壹壹壹壹壹壹壹壹壹壹壹壹壹壹'
      })
    }
    .height('100%')
    .width('100%')
  }
}

// Text组件的AttributeModifier接口实现类
class TextModifier implements AttributeModifier<TextAttribute> {
  constructor() {
  }

  applyNormalAttribute(instance: TextAttribute): void {
    instance.fontSize(16)
  }
}

@Preview
@Component
export struct SwitchSettingItem {
  @State isON: boolean = false
  aboutToAppear(): void {
    this.isON = false
  }

  @State wordBreakIndex: number = 0;
  @State wordBreak: WordBreak[] = [WordBreak.NORMAL, WordBreak.BREAK_ALL, WordBreak.BREAK_WORD]
  @State wordBreakStr: string[] = ['NORMAL', 'BREAK_ALL', 'BREAK_WORD']
  @Prop title: string
  @Prop description: string

  build() {
    Row() {
      Column() {
        Text(this.title)
          .fontSize(26)
        Text(this.description)
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .wordBreak(WordBreak.BREAK_ALL)
          .fontSize(15)
          .fontColor('#fff55d18')
          .margin({
            top: 5,
          })
      }.layoutWeight(1)
      .alignItems(HorizontalAlign.Start)

      // Blank().layoutWeight(1)
      Row() {
        Toggle({
          type: ToggleType.Switch,
          isOn: this.isON
        })
      }.margin({
        left: 30
      }).onClick(() => {
      }).onTouchIntercept((event: TouchEvent) => {
        return HitTestMode.Block //拦截点击事件, 否则会直接触发switch的切换
      })
    }.padding({
      top: 50,
      bottom: 50,
    })
  }
}
分享
微博
QQ
微信
回复
2025-01-09 18:46:29
相关问题
HarmonyOS 单位不一致问题
431浏览 • 1回复 待解决
签名不一致报错怎么回事?
3214浏览 • 1回复 待解决
HarmonyOS SM2加密后数据与Java不一致
398浏览 • 1回复 待解决
依赖hsp出包,报错versionname不一致
454浏览 • 1回复 待解决
启动和调试的行为不一致
669浏览 • 1回复 待解决
water flow 出现gap不一致问题
1035浏览 • 1回复 待解决
HarmonyOS Text组件文本上下间距不一致
380浏览 • 1回复 待解决
napi里面,相同输入输出不一致
2197浏览 • 1回复 待解决
Path组件绘制的线条粗细不一致
2274浏览 • 1回复 待解决
window 全屏操作不同设备表现不一致
767浏览 • 1回复 待解决
文字空行高度与字体高度不一致
2465浏览 • 1回复 待解决