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

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

这个页面又是常见的上中下布局，从上至下依次为导航栏、聊天列表和输入框工具栏，我们可以先写一下简单的结构，最上面导航栏是横向布局，所以写个Row容器，中间是List，底部仍然是Row容器，导航栏和底部输入框的高度是固定的，List不确定，所以给List设置layoutWeight属性它自动撑满屏幕，具体代码是这样的：

1. Row{
2.    
3. }
4. .width(100.percent)
5. .height(60)
6. List{
7.    
8. }
9. .width(100.percent)
10. .layoutWeight(1)
11. Row{
12.    
13. }
14. .width(100.percent)
15. .height(50)

复制代码

整体结构写好了，剩下的工作就是分别丰富每一部分的内容，导航栏部分为了使标题绝对居中，所以我将Row换为Stack容器：

1. Stack {
2.      Text('消息')
3.     .fontSize(16)
4.     .fontWeight(FontWeight.Bold)
5.     .fontColor(Color.BLACK)
6.     Row{
7.          Image(@r(app.media.back))
8.     .width(27)
9.     .height(27)
10.      .onClick({evet => Router.back()})
11.     }.width(100.percent).justifyContent(FlexAlign.Start).padding(left:5)
12. }
13. .width(100.percent)
14. .height(60)
15. .backgroundColor(Color.WHITE)

复制代码

消息列表部分要考虑到消息是本人发送的还是别人发送的，以此区分内容靠左还是靠右，还要考虑到消息内容过长时的屏幕适配问题，可以使用约束属性和设置内容的最大和最小尺寸，消息列表组件的具体代码如下：

1. package ohos_app_cangjie_entry.components
2. internal import ohos.base.*
3. internal import ohos.component.*
4. internal import ohos.state_manage.*
5. import ohos.state_macro_manage.*
6. import cj_res_entry.app
7. import ohos_app_cangjie_entry.model.ChatItem
8. @Component
9. public class chatrow {
10.     @Link var model:ChatItem
11.     func build() {
12.         Column(){
13.             Row{
14.                             Text(model.getSendTime())
15.                             .fontColor(Color.GRAY)
16.                             .fontSize(13)
17.                         }
18.                         .width(100.percent)
19.                         .alignItems(VerticalAlign.Center)
20.                         .justifyContent(FlexAlign.Center)
21.            
22.                 if(model.getFrom() == 'I'){
23.                  Row(8){
24.                       Image(@r(app.media.ih1))
25.                         .width(34)
26.                         .height(34)
27.                         .borderRadius(17)
28.                         .backgroundColor(Color.GRAY)
29.                     Column(5){
30.                             Text(model.getName())
31.                             .fontSize(14)
32.                             .fontColor(0x4a4a4a)
33.                             Text(model.getContent())
34.                             .backgroundColor(Color(237,237,237))
35.                             .padding(8)
36.                             .fontColor(Color.BLACK)
37.                             .fontSize(15)
38.                             .borderRadius(6)
39.                                 .constraintSize(minWidth: 20.vp, maxWidth: 60.percent)
40.                         }
41.                         .alignItems(HorizontalAlign.Start)
42.                      }
43.                     .alignItems(VerticalAlign.Top)
44.                 }else if(model.getFrom() == 'D'){
45.                
46.                 Row(8){
47.                     Column(5){
48.                             Text(model.getName())
49.                             .fontSize(14)
50.                             .fontColor(0x4a4a4a)
51.                             Text(model.getContent())
52.                             .backgroundColor(0xd84642)
53.                             .padding(8)
54.                             .fontColor(Color.WHITE)
55.                             .fontSize(15)
56.                             .borderRadius(6)
57.                                 .constraintSize(minWidth: 20.vp, maxWidth: 60.percent)
58.                         }
59.                         .alignItems(HorizontalAlign.End)
60.                     Image(@r(app.media.ih2))
61.                         .width(34)
62.                         .height(34)
63.                         .borderRadius(17)
64.                         .backgroundColor(Color.GRAY)
65.                      }
66.                     .alignItems(VerticalAlign.Top)
67.                 .width(100.percent)
68.                 .justifyContent(FlexAlign.End)
69.             }
70.         }
71.         .alignItems(HorizontalAlign.Start)
72.     }
73. }

复制代码

最后是输入框部分，比较难的应该是上方阴影和聊天框语音框的切换，仓颉中阴影的设置依然使用shadow属性，输入框的切换使用if语句控制即可，这一部分的具体代码如下：

1. Row(6){
2. if(inputText){
3.      Image(@r(app.media.barvoice))
4.     .width(30)
5.     .height(30)
6.     .borderRadius(15)
7.     .onClick({evet =>
8.         inputText = false
9.         })
10.      TextInput()
11.     .height(36)
12.     .borderRadius(18)
13.     .backgroundColor(Color(237,237,237))
14.     .layoutWeight(1)
15. }else {
16.      Image(@r(app.media.bartxt))
17.     .width(30)
18.     .height(30)
19.     .borderRadius(15)
20.     .onClick({evet =>
21.         inputText = true
22.         })
23.     Text('按住讲话')
24.      .height(36)
25.     .borderRadius(18)
26.     .backgroundColor(Color(237,237,237))
27.     .layoutWeight(1)
28.     .textAlign(TextAlign.Center)
29. }
30.     Image(@r(app.media.barimg))
31.     .width(30)
32.     .height(30)
33.     .borderRadius(15)
34. }
35. .width(100.percent)
36. .height(46)
37. .alignItems(VerticalAlign.Center)
38. .padding(left:12,right:12)
39. .borderWidth(EdgeWidths( top: 0.5.vp))
40. .borderStyle(BorderStyle.Solid)
41. .borderColor(Color(216,216,216))
42. .shadow(radius: 23, color: Color(230,230,230), offsetX: 0, offsetY: -20)

复制代码

今天的内容就是这样，感谢阅读。##HarmonyOS语言##仓颉##购物#

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！