HarmonyOS NEXT鸿蒙开发:案例:京东评论列表中的回复、有用按钮(图片文本按钮) 作者:马育民 • 2025-11-26 09:54 • 阅读:10006 # 说明 实现京东评价中的按钮,如下图: [](https://www.malaoshi.top/upload/0/0/1GW2IPpVv9EU.png) ### 分析 按钮有文字,没有背景色,说明是文本按钮 有图片,说明需要给按钮添加子组件 ### 代码 ``` Row(){ // 行布局,让两个按钮显示在同一行 Button(){ Row() { // 按钮内只能有一个子组件,所以用行布局,让图片和文字显示在同一行 Image($r("app.media.startIcon")) .width(20) Text("回复") .margin({ left:5 // 距离左侧图标为5 }) } } .buttonStyle(ButtonStyleMode.TEXTUAL) // 文本按钮,没有背景色 .fontColor("#333") // 文本按钮字体颜色为蓝色,设置为黑色 Button(){ Row() { Image($r("app.media.startIcon")) .width(20) Text("有用") .margin({ left:5 }) } } .margin({ left:20 // 距离左侧按钮为20 }) .buttonStyle(ButtonStyleMode.TEXTUAL) .fontColor(Color.Black) } .width("100%") .justifyContent(FlexAlign.End)// 右对齐 .margin({ top:20, bottom:50, }) ``` 原文出处:http://malaoshi.top/show_1GW2IPxVpOAs.html