鸿蒙Next仓颉语言开发实战教程：聊天页面

大家下午好。昨天分享了消息列表页面，今天继续分享聊天页面的开发过程：

这个页面又是常见的上中下布局，从上至下依次为导航栏、聊天列表和输入框工具栏，我们可以先写一下简单的结构，最上面导航栏是横向布局，所以写个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.components internal import ohos.base.* internal import ohos.component.* internal import ohos.state_manage.* import ohos.state_macro_manage.* import cj_res_entry.app import ohos_app_cangjie_entry.model.ChatItem @Component public 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语言##仓颉##购物#