ArKTS: staic message simple UI

最新推荐文章于 2025-08-04 22:17:32 发布

geovindu

最新推荐文章于 2025-08-04 22:17:32 发布

阅读量121

点赞数 3

CC 4.0 BY-SA版权

分类专栏： HarmonyOS 文章标签： ui harmonyos typescript

本文链接：https://blog.youkuaiyun.com/geovindu/article/details/149866789

HarmonyOS 专栏收录该内容

5 篇文章

订阅专栏

项目结构：

一种：

/**
 # encoding: utf-8
 # 版权所有 2024 ©涂聚文有限公司
 # 许可信息查看：言語成了邀功盡責的功臣，還需要行爲每日來值班嗎
 # 描述： https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ohos-arkui-advanced-dialog
 # Author    : geovindu,Geovin Du 涂聚文. https://yesicon.app/
 # IDE       : DevEco Studio 5.1.1 HarmonyOS ArKTS
 # OS        : windows 10  ohpm install @coremail/mail_base     https://gitee.com/openharmony-tpc/ohos_mail_base
 # database  : mysql 9.0 sql server 2019, postgreSQL 17.0  Oracle 21c Neo4j
 # Datetime  : 2024/10/31 20:33
 # User      : geovindu
 # Product   : MyApplicatin
 # Project   : MyApplicatin
 # File      : WxList.ets
 * */
import { UserInfoBase } from '../../constant/UserInfoBase'
import { router } from '@kit.ArkUI';
import { TodoTitleNameUtils } from '../../pages/utils/TodoTitleNameUtils'
import { trustedAppService } from '@kit.DeviceSecurityKit';
import { CommonConstantWX } from '../../constant/CommonConstantWX'
import { UserMessageBase } from '../../constant/UserMessageBase';
 
// 2. 定义传递的参数类型（包含user属性）
interface UserParams {
  user: UserInfoBase;
}
 
@Entry
@Component
struct WxList {
  @State message: string = '聊天';
  @State users: UserInfoBase=new UserInfoBase() ;
  @State messagelist: Array<UserMessageBase> = CommonConstantWX.mUserMessage
  // 3. 获取参数并断言为UserParams类型
  //const params = router.getParams() as UserParams | undefined;
 
  aboutToAppear() {
    // 获取传递的参数
    const params =router.getParams() as UserParams | undefined;// router.getParams();
    if (params?.user) {
      this.users = params.user as UserInfoBase; // 类型转换，确保与传递的item结构一致
 
    }
  }
  build() {
    Column() {
 
      Row() {
        TodoTitleNameUtils({ isTitle: true, titleName: this.users.name === undefined ? "" : this.users.name })
      }
      .width('100%')
      .height('15pv')
 
      List() {
        ForEach(this.messagelist, (item: UserMessageBase) => {
          ListItem() {
            Column() {
              // 外层Row设置主轴靠右对齐，确保内部元素整体靠右
              Row() {
                if(item.category===0) {
                  Image(item.img)
                    .width(40)
                    .height(50)
                    .margin({right: 8})
                    .borderRadius(5)
                    .objectFit(ImageFit.Contain)
                  // 移除不必要的align，由外层Row统一控制对齐
                }
                Text(item.content)
                  .fontSize($r('app.float.pagemessagesize'))
                  .fontWeight(FontWeight.Bold)
                  .backgroundColor(item.category===0?'#ffffff': '#ff81cd0a') // 白色背景
                  .borderRadius(10) // 圆角效果，数值可调整
                  .padding({ left: 12, right: 12, top: 8, bottom: 8 }) // 文本与背景的内边距
                  .margin({ right: 8 }) // 图片与文本之间的间距
                  .onClick(() => {
                    router.pushUrl({
                      url: 'pages/weixin/WXHome',
                    })
                  })
                if(item.category===1) {
                  Image(item.img)
                    .width(40)
                    .height(50)
                  .margin({left: 8})
                    .borderRadius(5)
                    .objectFit(ImageFit.Contain)
                  // 移除不必要的align，由外层Row统一控制对齐
                }
              }
              .width('100%')
              .justifyContent(item.category===0?FlexAlign.Start:FlexAlign.End) // 关键：Row内元素靠右排列 FlexAlign.End
              .align(item.category===0?Alignment.Start:Alignment.End) // Alignment.End
              .margin({ right: 1})
            }
            .alignItems(item.category===0?HorizontalAlign.Start:HorizontalAlign.End) // 确保Column的子元素（Row）靠右对齐 HorizontalAlign.End
            .align(item.category===0?Alignment.Start:Alignment.End) //Alignment.End
            // 可根据需要添加整体外边距
            .margin({ right: 12, top: 8, bottom: 8 })
 
 
 
          }.align(item.category===0?Alignment.Start:Alignment.End) // Alignment.End
        })
      }.height('80%')
      .width('100%')
      .backgroundColor('#ccc')
      .scrollSnapAlign(ScrollSnapAlign.START)
 
      Row({ space: 8 }) {
        // 语音按钮
        Image($r('app.media.SoundHighSolid'))
          .width(30)
          .height(30)
          .objectFit(ImageFit.Contain)
          .onClick(() => {
            router.pushUrl({
              url: 'pages/weixin/WXHome',
            })
          })
 
        // 输入框
        TextInput({ placeholder: '请输入消息...'})
          .id('WxListHelloWorld')
          .fontSize($r('app.float.page_text_font_size'))
          .fontWeight(FontWeight.Normal)
          .backgroundColor('#ffffff')
          .borderRadius(20)  // 圆角输入框
          .padding({ left: 16, right: 16 })  // 文本内边距
          .onClick(() => {
            this.message = this.users?.name || "";
          })
          .flexGrow(1)  // 自动填充剩余空间
          .width('75%')
        // 发送按钮
        Button('+')
          .fontSize(18)
          .width(40)
          .height(40)
          .borderRadius(20)  // 圆形按钮
          .backgroundColor('#07C160')  // 微信绿
          //.textStyle({ color: '#ffffff' })
          .onClick(() => {
            router.back()
          })
      }
      .margin({ top: 8, left: 12, right: 12, bottom: 8 })  // 整体外边距
      .height(50)  // 合适的高度
      .backgroundColor('#f5f5f5')  // 浅灰背景
      .alignItems(VerticalAlign.Center)  // 垂直居中对齐
      .width('100%')
    }
  }
}

二种：

/**
 # encoding: utf-8
 # 版权所有  2025 ©涂聚文有限公司™ ®
 # 许可信息查看：言語成了邀功盡責的功臣，還需要行爲每日來值班嗎
 # 描述：
 # Author    : geovindu,Geovin Du 涂聚文.
 # IDE       : DevEco Studio 5.1.1  HarmonyOS ArKTS
 # os        : windows 10
 # database  : mysql 9.0 sql server 2019, postgreSQL 17.0  Oracle 21c Neo4j
 # Datetime  : 2025/8/2 23:56
 # User      :  geovindu
 # Product   : DevEco Studio
 # Project   : SQLiteApp
 # File      : WxControl.ets
 **/
import { UserMessageBase } from '../constant/UserMessageBase';
import { router } from '@kit.ArkUI';

@Component//表示组件
export default struct WxControl {

  @Prop useritem:UserMessageBase=new UserMessageBase

  build() {

    // 外层Row设置主轴靠右对齐，确保内部元素整体靠右
    Row() {
      if(this.useritem.category===0) {
        Image(this.useritem.img)
          .width(40)
          .height(50)
          .margin({right: 8})
          .borderRadius(5)
          .objectFit(ImageFit.Contain)
        // 移除不必要的align，由外层Row统一控制对齐
      }
      Text(this.useritem.content)
        .fontSize($r('app.float.pagemessagesize'))
        .fontWeight(FontWeight.Bold)
        .backgroundColor(this.useritem.category===0?'#ffffff': '#ff81cd0a') // 白色背景
        .borderRadius(10) // 圆角效果，数值可调整
        .padding({ left: 12, right: 12, top: 8, bottom: 8 }) // 文本与背景的内边距
        .margin({ right: 8 }) // 图片与文本之间的间距
        .onClick(() => {
          router.pushUrl({
            url: 'pages/weixin/WXHome',
          })
        })
      if(this.useritem.category===1) {
        Image(this.useritem.img)
          .width(40)
          .height(50)
          .margin({left: 8})
          .borderRadius(5)
          .objectFit(ImageFit.Contain)
        // 移除不必要的align，由外层Row统一控制对齐
      }
    }
    .width('100%')
    .justifyContent(this.useritem.category===0?FlexAlign.Start:FlexAlign.End) // 关键：Row内元素靠右排列 FlexAlign.End
    .align(this.useritem.category===0?Alignment.Start:Alignment.End) // Alignment.End
    .margin({ right: 1})

  }

}


/**
 # encoding: utf-8
 # 版权所有 2024 ©涂聚文有限公司
 # 许可信息查看：言語成了邀功盡責的功臣，還需要行爲每日來值班嗎
 # 描述： https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ohos-arkui-advanced-dialog
 # Author    : geovindu,Geovin Du 涂聚文. https://yesicon.app/
 # IDE       : DevEco Studio 5.1.1 HarmonyOS ArKTS
 # OS        : windows 10  ohpm install @coremail/mail_base     https://gitee.com/openharmony-tpc/ohos_mail_base
 # database  : mysql 9.0 sql server 2019, postgreSQL 17.0  Oracle 21c Neo4j
 # Datetime  : 2024/10/31 20:33
 # User      : geovindu
 # Product   : MyApplicatin
 # Project   : MyApplicatin
 # File      : WxList.ets
 * */
import { UserInfoBase } from '../../constant/UserInfoBase'
import { router } from '@kit.ArkUI';
import { TodoTitleNameUtils } from '../../pages/utils/TodoTitleNameUtils'
import { trustedAppService } from '@kit.DeviceSecurityKit';
import { CommonConstantWX } from '../../constant/CommonConstantWX'
import { UserMessageBase } from '../../constant/UserMessageBase';
import WxControl, {  } from '../../Control/WxControl'
import { it } from '@ohos/hypium';

// 2. 定义传递的参数类型（包含user属性）
interface UserParams {
  user: UserInfoBase;
}

@Entry
@Component
struct WxList {
  @State message: string = '聊天';
  @State users: UserInfoBase=new UserInfoBase() ;
  @State messagelist: Array<UserMessageBase> = CommonConstantWX.mUserMessage
  // 3. 获取参数并断言为UserParams类型
  //const params = router.getParams() as UserParams | undefined;

  aboutToAppear() {
    // 获取传递的参数
    const params =router.getParams() as UserParams | undefined;// router.getParams();
    if (params?.user) {
      this.users = params.user as UserInfoBase; // 类型转换，确保与传递的item结构一致

    }
  }
  build() {
    Column() {

      Row() {
        TodoTitleNameUtils({ isTitle: true, titleName: this.users.name === undefined ? "" : this.users.name })
      }
      .width('100%')
      .height('15pv')

      List() {
        ForEach(this.messagelist, (item: UserMessageBase) => {
          ListItem() {
            Column() {
              // 外层Row设置主轴靠右对齐，确保内部元素整体靠右
              WxControl({ useritem: item }) //引用用户控件
            }
            .alignItems(item.category===0?HorizontalAlign.Start:HorizontalAlign.End) // 确保Column的子元素（Row）靠右对齐 HorizontalAlign.End
            .align(item.category===0?Alignment.Start:Alignment.End) //Alignment.End
            // 可根据需要添加整体外边距
            .margin({ right: 12, top: 8, bottom: 8 })



          }.align(item.category===0?Alignment.Start:Alignment.End) // Alignment.End
        })
      }.height('80%')
      .width('100%')
      .backgroundColor('#ccc')
      .scrollSnapAlign(ScrollSnapAlign.START)

      Row({ space: 8 }) {
        // 语音按钮
        Image($r('app.media.SoundHighSolid'))
          .width(30)
          .height(30)
          .objectFit(ImageFit.Contain)
          .onClick(() => {
            router.pushUrl({
              url: 'pages/weixin/WXHome',
            })
          })

        // 输入框
        TextInput({ placeholder: '请输入消息...'})
          .id('WxListHelloWorld')
          .fontSize($r('app.float.page_text_font_size'))
          .fontWeight(FontWeight.Normal)
          .backgroundColor('#ffffff')
          .borderRadius(20)  // 圆角输入框
          .padding({ left: 16, right: 16 })  // 文本内边距
          .onClick(() => {
            this.message = this.users?.name || "";
          })
          .flexGrow(1)  // 自动填充剩余空间
          .width('75%')
        // 发送按钮
        Button('+')
          .fontSize(18)
          .width(40)
          .height(40)
          .borderRadius(20)  // 圆形按钮
          .backgroundColor('#07C160')  // 微信绿
          //.textStyle({ color: '#ffffff' })
          .onClick(() => {
            router.back()
          })
      }
      .margin({ top: 8, left: 12, right: 12, bottom: 8 })  // 整体外边距
      .height(50)  // 合适的高度
      .backgroundColor('#f5f5f5')  // 浅灰背景
      .alignItems(VerticalAlign.Center)  // 垂直居中对齐
      .width('100%')
    }
  }
}