HarmonyOS 鸿蒙Next list中item数据显示效果不一致
HarmonyOS 鸿蒙Next list中item数据显示效果不一致
item 的代码如下
```javascript
[@Preview](/user/Preview)
[@Component](/user/Component)
export struct SwitchSettingItem {
[@ObjectLink](/user/ObjectLink) setting: MessageSettingListModel
[@ObjectLink](/user/ObjectLink) model: MessageSettingListModel
[@Prop](/user/Prop) vm: NotificationSettingPageViewModel
[@State](/user/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 鸿蒙Next list中item数据显示效果不一致的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
2 回复
建议优先组合wordBreak属性设置为WordBreak.BREAK_ALL方式实现字母为单位进行截断
@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)
Row() {
Toggle({
type: ToggleType.Switch,
isOn: this.isON
})
}.margin({
left: 30
}).onClick(() => {})
.onTouchIntercept((event: TouchEvent) => {
return HitTestMode.Block //拦截点击事件, 否则会直接触发switch的切换
})
}.padding({
top: 50,
bottom: 50,
})
}
}
更多关于HarmonyOS 鸿蒙Next list中item数据显示效果不一致的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
针对帖子标题“HarmonyOS 鸿蒙Next list中item数据显示效果不一致”的问题，可能的原因及解决方案如下：
在HarmonyOS开发中，若Next list中的item数据显示效果不一致，这通常与布局文件、数据绑定逻辑或样式设置有关。请检查以下几点：
-
布局文件：确保每个item的布局文件定义一致，包括尺寸、边距、内边距等属性。不一致的布局定义可能导致显示差异。
-
数据绑定：检查数据绑定逻辑，确保每个item绑定的数据格式和内容一致。数据格式或内容差异可能导致显示不一致。
-
样式设置：检查是否有针对特定item的样式设置，如字体大小、颜色等。这些样式设置可能覆盖了全局样式，导致显示不一致。
-
列表适配器：如果使用了自定义适配器，请检查适配器中的getView或onBindViewHolder方法，确保每个item的处理逻辑一致。
-
系统或环境问题：考虑是否可能是系统或环境问题导致的显示不一致。尝试在不同的设备或模拟器上运行程序，观察是否仍然存在此问题。
如果以上检查均未发现问题所在，且问题依旧没法解决，请联系官网客服。官网地址是：https://www.itying.com/category-93-b0.html
