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,
    })
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.

HarmonyOS

zxjiu

2025-01-09 16:19:12

672浏览

回答 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,
    })
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.

2025-01-09 18:46:29

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

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

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