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

@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.

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.