根据一次开发多端部署开发短信页面

HarmonyOS

江湖骗子嗷

2024-05-26 18:02:51

浏览

回答 1

按赞同

按时间

你牙上有菜

1.功能场景描述及使用场景

本文主要开发短信中的会话详情页面，将与某人的信息往来展示出来，并能够在平板等设备上自动适配，以达到一次开发多端部署的能力

2.使用的核心API

Stack组件

栅格组件

3.核心代码解释

1.通过边框设置来形成一个简单的气泡消息，然后通过stack容器将其子组件按照轴方向依次堆叠，后一个子组件覆盖前一个子组件。通过其alignContent接口，可以设置子组件在容器内的对齐方式，如alignContent: Alignment.TopStart代表子组件从左上角对齐。

2.发送出的消息和接收到的消息的消息气泡结构基本一致，可以通过增加一个标志位，让两种消息共用MessageBubble这个自定义组件，代码如下所示。将这个标志位设置true，可以查看接收消息的效果。

3.通过栅格布局中的断点来使我们的消息展示页面能够与不同的设备适配

4.自定义一个数据列表，然后通过list组件和foreach语法将数据展示出来形成消息列表。

核心代码如下：

消息气泡

@Component 
export default struct MessageBubble { 
private content: string = "Introduction" 
private time :string ="上午 10：35" 
private isReceived:boolean = true //通过标志位，判断是发送or接收场景，进而使用不同的样式 
 
build() { 
  Column() { 
    //在消息气泡上面增加时间显示 
    Flex({alignItems:ItemAlign.Center,direction: FlexDirection.Row, 
      justifyContent:this.isReceived ? FlexAlign.Start : FlexAlign.End}){ 
      Text(this.time) 
        .textAlign(TextAlign.Start) 
        .fontSize(10) 
        .lineHeight(13) 
        .fontColor(Color.Grey) 
    }.width('100%') 
    .margin({left:this.isReceived? 12:0,right:this.isReceived ? 0 : 12}) 
 
 
    Flex({ justifyContent:this.isReceived? FlexAlign.Start:FlexAlign.End, 
      alignItems: ItemAlign.Center }) { 
      Stack({ alignContent:this.isReceived? Alignment.TopStart: Alignment.TopEnd }) { // 在左上角堆叠一个小色块 
        Column() 
          .backgroundColor(this.isReceived?Color.White:"#C0EBDF") 
          .borderRadius(4) 
          .width(24) 
          .height(24) 
        Text(this.content) 
          .fontSize(16) 
          .lineHeight(21) 
          .padding({ left: 12, right: 12, top: 8, bottom: 8 }) 
          .backgroundColor(this.isReceived?Color.White:"#C0EBDF") 
          .borderRadius(24) 
          .fontColor("#182431") 
      } 
    }.width('100%') 
 
 
  } 
  .margin({left: 24, right: 24 }) 
  .backgroundColor('#f5f6f7') // 消息背景色，仅用于开发和测试 
  .zIndex(1) 
} 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.

底部输入栏

import window from '@ohos.window'; 
import deviceinfo from '@ohos.deviceInfo' 
import deviceManager from '@ohos.distributedDeviceManager'; 
@Component 
export default struct BottomArea { 
@State Mmsdel:string='' 
@State screenHeight1: number = 0; 
 
 
aboutToAppear(){ 
  window.getLastWindow(getContext(this)).then(currentWindow => { 
    let property = currentWindow.getWindowProperties(); 
    let avoidArea = currentWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_KEYBOARD); 
    // 初始化显示区域高度 
    this.screenHeight1 = px2vp(property.windowRect.height - avoidArea.bottomRect.height); 
    // 监视软键盘的弹出和收起 
    currentWindow.on('avoidAreaChange', async data => { 
      if (data.type !== window.AvoidAreaType.TYPE_KEYBOARD) { 
        return; 
      } 
      this.screenHeight1 = px2vp(property.windowRect.height - data.area.bottomRect.height); 
    }) 
  }) 
} 
 
build() { 
  Row() { 
    Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 
      TextArea({ placeholder: '短信', text: this.Mmsdel }) 
        .placeholderColor("#99000000") 
        .caretColor("#007DFF") 
        .backgroundColor("#F1F3F5") 
        .borderRadius(20) 
        .height(40) 
        .flexGrow(1)// 将父容器的剩余空间全部分配给此组件 
        .onChange((data) => { 
          this.Mmsdel = data //获取输入框数据 
        }) 
 
      Image($r("app.media.app_icon")) 
        .height(36) 
        .width(36) 
        .opacity(0.4) 
        .margin({ left: 12 }) 
      .onClick(()=>{ 
        let hardwareModelInfo: string = deviceinfo.hardwareModel; 
        console.info('the value of the deviceinfo hardwareModel is :' + hardwareModelInfo); 
 
        let hardwareProfileInfo: string = deviceinfo.hardwareProfile; 
        console.info('the value of the deviceinfo hardwareProfile is :' + hardwareProfileInfo); 
      }) 
 
    } 
    // .height(72) 
    .width('100%') 
    .padding({ left: 24, right: 24, bottom: 8, top: 8 }) 
    .backgroundColor('#87CEFA') // 底部输入栏背景色，仅用于开发测试 
  } 
  // .expandSafeArea([SafeAreaType.KEYBOARD]) 
 
} 1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.

消息列表

import MessageBubble from './MessageBubble' 
 
@Component 
export default struct MessageItem{ 
private isReceived: boolean 
private content:string 
private time:string 
 
build(){ 
  GridRow({gutter:{y:20}}){ 
    GridCol({span:{sm: 12,md: 8,lg: 8}, 
    offset:{sm: 0, md:this.isReceived? 0 : 4, lg: this.isReceived? 0:4} 
    }) { 
      Flex({ justifyContent: FlexAlign.End, alignItems: ItemAlign.End }) { 
        MessageBubble({ 
          isReceived: this.isReceived, 
          content: this.content, 
          time: this.time 
        }) 
      } 
    } 
  } 
} 
} 
 
/*@Entry 
@Component 
struct Conversation{ 
build(){ 
  Column(){//验证效果 
    MessageItem({ 
      isReceived: globalMessageList[1].isReceived, 
      content: globalMessageList[1].content, 
      time: globalMessageList[1].time 
    }) 
    MessageItem({ 
      isReceived: globalMessageList[3].isReceived, 
      content: globalMessageList[3].content, 
      time: globalMessageList[3].time 
    }) 
  }.backgroundColor('#87CEFA')//消息背景测试 
} 
}*/1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.

顶部标题栏

import window from '@ohos.window' 
 
@Component 
export default struct TopArea { 
@State screenHeight: number = 0; 
@State statusBackgroundColor: Color = 0x03ffffff 
 
async aboutToAppear(){ 
 
  // // 顶部安全高度适配 
  let w = await window.getLastWindow(getContext(this)) 
  await w.setWindowLayoutFullScreen(false) 
  this.screenHeight = px2vp(w.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height) 
 
} 
 
build() { 
  Row(){ 
    // 顶部安全高度适配 
    // Row(){} 
    // .backgroundColor(Color.White) 
    // .height(this.screenHeight) 
    /*.width("100%") 
    .backgroundColor(this.statusBackgroundColor) 
    .animation({ 
      duration: 300, 
      curve: Curve.Friction, 
      iterations: 1, 
      playMode: PlayMode.Alternate 
    })*/ 
    Flex({ alignItems: ItemAlign.Center }) { 
      Image($r('app.media.icon')) 
        .width(24) 
        .height(24) 
      Image($r('app.media.icon')) 
        .width(40) 
        .height(40) 
      Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, 
        alignItems: ItemAlign.Start}) { 
        Text('张三').fontSize(16).fontColor("#182431") 
        Text('+123 4567 8901').fontSize(14).fontColor("#66182431") 
      } 
      Blank()// 拉伸能力 
      Image($r("app.media.icon")) 
        .width(24) 
        .height(24) 
      Image($r('app.media.icon')) 
        .width(24) 
        .height(24) 
 
    } 
    .width('100%') 
    .height(56) 
    .backgroundColor('#87CEFA') // 顶部标题栏背景色，仅用于开发测试 
  } 
  .zIndex(99) 
  .expandSafeArea([SafeAreaType.KEYBOARD]) 
  // .height(this.screenHeight) 
  // .height(this.screenHeight) 
} 
 
 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.

index页面

import TopArea from '../pages/TopArea' 
import BottomArea from '../pages/BottomArea'; 
import MessageBubble from '../pages/MessageBubble'; 
import MessageItem from './MessageItem'; 
 
 
 
@Entry 
@Component 
struct Index { 
@State globalMessageList: any[]=[] 
 
build() { 
  Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, 
    justifyContent: FlexAlign.SpaceBetween }) { 
    Column() { 
      TopArea() 
      List() { 
        ForEach(this.globalMessageList, (item, index) => { 
          ListItem() { 
            MessageItem({ 
              isReceived: item.isReceived, 
              content: item.content, 
              time: item.time 
            }) 
          } 
        }) 
      }.listDirection(Axis.Vertical) 
      .edgeEffect(EdgeEffect.Spring) 
    } 
 
    BottomArea() 
  } 
  .backgroundColor("#f5f6f7")//消息的背景色 
  .width('100%') 
  .height('100%') 
} 
 
 
 
aboutToAppear() { 
  this.globalMessageList =[ 
    { 
    'time':'上午 10：20', 
    'content':'项目介绍', 
    'isReceived':false 
  }, 
    { 
      'time':'上午 10：28', 
      'content':'HarmonyOS搭建一个智能终端设备操作系统的框架和平台，促进万物互联产业的繁荣发展。', 
      'isReceived':false 
    }, 
    { 
      'time':'上午 10：32', 
      'content':'技术架构', 
      'isReceived':true 
    }, 
    { 
      'time':'上午 10：33', 
      'content':'HarmonyOS整体遵从分层设计，从下向上依次为：内核层、系统服务层、框架层和应用层。系统功能按照“系统 > 子系统 > 组件”逐级展开，在多设备部署场景下，支持根据实际需求裁剪某些非必要的组件。', 
      'isReceived':true 
    }] 
 
  this.globalMessageList.push( 
    { 
      'time':'上午 10：28', 
      'content':'测试能不能发出去', 
      'isReceived':true 
    } 
  ) 
 
} 
 
 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.

问题总结：

在手机上点击短信输入栏时，软键盘的弹出会将消息数据顶出标题栏
适配的版本信息
IDE：DevEco Studio 4.0.1.501
SDK：HarmoneyOS 3.2.4.0

2024-05-27 22:55:32

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

根据一次开发多端部署开发短信页面

订阅鸿蒙技术特刊，精选内容抢先看