Harmonyos Next Cangjie Language Development Practical Tutorial: Chat Page

Good afternoon, everyone. Yesterday, I shared the message list page. Today, I'll continue to share the development process of the chat page:

This page is again a common top-middle-bottom layout. From top to bottom, they are the navigation bar, chat List, and input box toolbar. We can first write a simple structure. The top navigation bar is horizontally laid out, so a Row container is written. The middle one is a List, and the bottom one is still a Row container. The height of the navigation bar and the bottom input box is fixed, while that of the list is not. So set the "layoutWeight" attribute for the List, and it will automatically fill the screen. The specific code is as follows:

Row{

}
.width(100.percent)
.height(60)
List{

}
.width(100.percent)
.layoutWeight(1)
Row{

}
.width(100.percent)
.height(50)  

The overall structure has been written. The remaining task is to enrich the content of each part respectively. For the navigation bar section, in order to make the title absolutely centered, I replaced the Row with the Stack container:

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) 

The message list part needs to take into account whether the message is sent by the individual or someone else to distinguish whether the content is on the left or right. It also needs to consider the screen adaptation issue when the message content is too long. Constraint attributes can be used and the maximum and minimum sizes of the content can be set. The specific code of the message list component is as follows:

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)
    }
}  

The last part is the input box. The more challenging part should be the switching between the upper shadow and the chat box voice box. In Cangjie, the setting of the shadow still uses the shadow property, and the switching of the input box can be controlled by the if statement. The specific code for this part is as follows:

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)  

That's all for today's content. Thank you for reading.