昨天分享了消息列表页面，今天继续分享聊天页面的开发过程：
这个页面又是常见的上中下布局，从上至下依次为导航栏、聊天列表和输入框工具栏，我们可以先写一下简单的结构，最上面导航栏是横向布局，所以写个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语言##仓颉##购物#
