鸿蒙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语言##仓颉##购物#