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

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

HarmonyOS
2024-05-26 18:02:51
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
PatrickGamp

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

底部输入栏

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

消息列表

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')//消息背景测试 
} 
}*/

顶部标题栏

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

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

问题总结:

  • 在手机上点击短信输入栏时,软键盘的弹出会将消息数据顶出标题栏
  • 适配的版本信息
  • IDE:DevEco Studio 4.0.1.501
  • SDK:HarmoneyOS 3.2.4.0
分享
微博
QQ
微信
回复
2024-05-27 22:55:32
相关问题
动画如何做渲染一次不消失
6338浏览 • 1回复 待解决
实现一次非对称RSA非对称加解密
476浏览 • 1回复 待解决
订阅接近光传感器只出一次数据
555浏览 • 1回复 待解决
如何跳转到系统发送短信页面
588浏览 • 1回复 待解决
鸿蒙开发保存页面到相册
4829浏览 • 1回复 待解决
请确定文件名是否确定后,再试一次
17511浏览 • 1回复 待解决