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