鸿蒙 Next 仓颉语言开发实战教程：消息列表
作者：幽蓝计划
- 2025-06-17 山东
本文字数：2586 字
阅读完需：约 8 分钟
大家下午好。昨天分享了消息列表页面，今天继续分享聊天页面的开发过程：
这个页面又是常见的上中下布局，从上至下依次为导航栏、聊天列表和输入框工具栏，我们可以先写一下简单的结构，最上面导航栏是横向布局，所以写个 Row 容器，中间是 List，底部仍然是 Row 容器，导航栏和底部输入框的高度是固定的，List 不确定，所以给 List 设置 layoutWeight 属性它自动撑满屏幕，具体代码是这样的：
Row{ }.width(100.percent).height(60)List{ }.width(100.percent).layoutWeight(1)Row{ }.width(100.percent).height(50)复制代码
整体结构写好了，剩下的工作就是分别丰富每一部分的内容，导航栏部分为了使标题绝对居中，所以我将 Row 换为 Stack 容器：
Stack { Text('消息') .fontSize(16) .fontWeight(FontWeight.Bold) .fontColor(Color.BLACK) Row{ Image(@r(app.media.back)) .width(27) .height(27) .onClick({evet => Router.back()}) }.width(100.percent).justifyContent(FlexAlign.Start).padding(left:5)}.width(100.percent).height(60).backgroundColor(Color.WHITE)复制代码
消息列表部分要考虑到消息是本人发送的还是别人发送的，以此区分内容靠左还是靠右，还要考虑到消息内容过长时的屏幕适配问题，可以使用约束属性和设置内容的最大和最小尺寸，消息列表组件的具体代码如下：
package ohos_app_cangjie_entry.componentsinternal import ohos.base.*internal import ohos.component.*internal import ohos.state_manage.*import ohos.state_macro_manage.*import cj_res_entry.appimport ohos_app_cangjie_entry.model.ChatItem@Componentpublic class chatrow { @Link var model:ChatItem func build() { Column(){ Row{ Text(model.getSendTime()) .fontColor(Color.GRAY) .fontSize(13) } .width(100.percent) .alignItems(VerticalAlign.Center) .justifyContent(FlexAlign.Center) if(model.getFrom() == 'I'){ Row(8){ Image(@r(app.media.ih1)) .width(34) .height(34) .borderRadius(17) .backgroundColor(Color.GRAY) Column(5){ Text(model.getName()) .fontSize(14) .fontColor(0x4a4a4a) Text(model.getContent()) .backgroundColor(Color(237,237,237)) .padding(8) .fontColor(Color.BLACK) .fontSize(15) .borderRadius(6) .constraintSize(minWidth: 20.vp, maxWidth: 60.percent) } .alignItems(HorizontalAlign.Start) } .alignItems(VerticalAlign.Top) }else if(model.getFrom() == 'D'){ Row(8){ Column(5){ Text(model.getName()) .fontSize(14) .fontColor(0x4a4a4a) Text(model.getContent()) .backgroundColor(0xd84642) .padding(8) .fontColor(Color.WHITE) .fontSize(15) .borderRadius(6) .constraintSize(minWidth: 20.vp, maxWidth: 60.percent) } .alignItems(HorizontalAlign.End) Image(@r(app.media.ih2)) .width(34) .height(34) .borderRadius(17) .backgroundColor(Color.GRAY) } .alignItems(VerticalAlign.Top) .width(100.percent) .justifyContent(FlexAlign.End) } } .alignItems(HorizontalAlign.Start) }}复制代码
最后是输入框部分，比较难的应该是上方阴影和聊天框语音框的切换，仓颉中阴影的设置依然使用 shadow 属性，输入框的切换使用 if 语句控制即可，这一部分的具体代码如下：
Row(6){if(inputText){ Image(@r(app.media.barvoice)) .width(30) .height(30) .borderRadius(15) .onClick({evet => inputText = false }) TextInput() .height(36) .borderRadius(18) .backgroundColor(Color(237,237,237)) .layoutWeight(1)}else { Image(@r(app.media.bartxt)) .width(30) .height(30) .borderRadius(15) .onClick({evet => inputText = true }) Text('按住讲话') .height(36) .borderRadius(18) .backgroundColor(Color(237,237,237)) .layoutWeight(1) .textAlign(TextAlign.Center)} Image(@r(app.media.barimg)) .width(30) .height(30) .borderRadius(15)}.width(100.percent).height(46).alignItems(VerticalAlign.Center).padding(left:12,right:12).borderWidth(EdgeWidths( top: 0.5.vp)).borderStyle(BorderStyle.Solid).borderColor(Color(216,216,216)).shadow(radius: 23, color: Color(230,230,230), offsetX: 0, offsetY: -20)复制代码
今天的内容就是这样，感谢阅读。##HarmonyOS 语言 ##仓颉 ##购物 #
划线
评论
复制
发布于: 刚刚阅读数: 3
幽蓝计划
关注
还未添加个人签名 2025-05-09 加入
还未添加个人简介
评论