HarmonyOS NEXT鸿蒙开发:案例:京东评论列表(一) 作者:马育民 • 2025-11-26 10:09 • 阅读:10004 # 说明 实现下图效果: [](https://www.malaoshi.top/upload/0/0/1GW2IQ45BwpJ.jpg) ### 分析 难度1:昵称一行,左侧是昵称、右侧是日期 难度2:回复按钮、有用按钮,是图片文本按钮 ### 代码 ``` @Entry @Component struct Index { build() { // 列示布局 Column(){ // 首字母大写 Row() { Image($r("app.media.startIcon")) .width(20) .margin({ right:10, }) Text("李雷") // 用户名 Blank() // 占满空余空间,注意:有空余空间才生效,即:可能需要设置宽度100% Text("11-23") .fontColor(Color.Gray) } .width("100%") // .backgroundColor(Color.Red) Row() { Rating({ rating: 5, indicator: true, }) .height(15) .margin({ right:10 }) Text("已购 白色 128GB") .fontColor(Color.Gray) .fontSize(14) } .margin({ top:10, bottom:5 }) Text("入手苹果16一段时间了,体验超棒!轻薄机身手感好,A18芯片超流畅,4800万像素拍照绝,续航也给力,狠狠爱住!") .lineHeight(25) Row(){ Button(){ Row() { Image($r("app.media.startIcon")) .width(20) .margin({ right:5 }) Text("回复") } } .buttonStyle(ButtonStyleMode.TEXTUAL) .fontColor("#444") .margin({ right:20 , }) Button(){ Row() { Image($r("app.media.startIcon")) .width(20) .margin({ right:5 }) Text("有用") } } .buttonStyle(ButtonStyleMode.TEXTUAL) .fontColor("#444") } .width("100%") .justifyContent(FlexAlign.End) .margin({ bottom:30 }) } .alignItems(HorizontalAlign.Start) .margin({ left:10, right:10, }) } } ``` ### 缺点 - 一些样式是重复的。 **解决:**[使用@Styles装饰器:定义组件重用样式](https://www.malaoshi.top/show_1GW4deUX44s.html "使用@Styles装饰器:定义组件重用样式") - 评论不是一条,当有多个评论时,需要复制粘贴大量代码,容易混乱。 **解决:**[创建自定义组件](https://www.malaoshi.top/show_1GW1QfElTpD.html "创建自定义组件") - 当评论过多,超过屏幕时,不能滚动。 **解决:**使用 `List`、`ListItem` 组件 原文出处:http://malaoshi.top/show_1GW2IQ7o1j2Q.html