登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 业界 ›HarmonyOS NEXT仓颉开发语言实战案例：银行App ...

HarmonyOS NEXT仓颉开发语言实战案例：银行App

恿榫 2025-6-26 07:35:23
仓颉语言的商城项目基本开发结束啦，今天跟大家分享新的项目，一个银行app，说是新项目但是大家可能会有些眼熟，在ArkTS的教程中就写过这个项目。今天我们仓颉语言再写一遍，看看和ArkTS有什么不同。
1.png

首先我们可以看到页面内容撑满了屏幕，所以需要设置沉浸模式，具体代码如下：
  1. windowStage.getMainWindow().setWindowLayoutFullScreen(true)
复制代码
接下来来到页面内容部分，这是一个可以滚动的列表布局，所以可以使用List容器，那么在List容器又可以分为几个模块：
2.png

有了清晰的思路接下来就可以每个部分逐个击破，最顶部的资产部分是有背景图片的，所以我们把图片和内容部分分开来看，每一个部分就都变得很简单了，具体代码如下：
  1. Stack(){
  2.             Image(@r(app.media.nav_img))
  3.               .width(100.percent)
  4.             Row(){
  5.               Column(6){
  6.                 Row(){
  7.                   Text('总资产')
  8.                     .fontSize(13)
  9.                     .fontColor(Color.BLACK)
  10.                   Image(@r(app.media.eyes))
  11.                     .width(14)
  12.                     .height(10)
  13.                     .margin(left:5)
  14.                 }
  15.                 Text('****')
  16.                   .fontSize(30)
  17.                   .fontColor(Color.BLACK)
  18.                   .fontWeight(FontWeight.Bold)
  19.                 Text('今日收益 +13.3')
  20.                   .fontSize(12)
  21.                   .fontColor(Color.GRAY)
  22.               }
  23.               .alignItems(HorizontalAlign.Start)
  24.               .margin(left:26)
  25.               Row(){
  26.                 Image(@r(app.media.shield))
  27.                   .width(16)
  28.                   .height(16)
  29.                 Text('开启保障')
  30.                   .fontColor(Color.WHITE)
  31.                   .fontSize(13)
  32.                   .margin(left:6)
  33.               }
  34.               .width(102)
  35.               .height(30)
  36.               .justifyContent(FlexAlign.Center)
  37.               .backgroundColor(Color(0, 0, 0, alpha: 0.1))
  38.               .borderRadius(topLeft:15.vp,bottomLeft:15.vp)
  39.             }
  40.             .width(100.percent)
  41.             .justifyContent(FlexAlign.SpaceBetween)
  42.           }
复制代码
接下来是功能按钮列表部分，这一部分需要注意的地方是它和上方资产内容有一些重叠，我的实现方式是给边距设置负数让它向顶部偏移，然后它的圆角只有上方的两个角，所以还要注意部分圆角的设置，参考代码如下：
  1. Row(){
  2. }
  3. .width(100.percent)
  4. .backgroundColor(Color.WHITE)
  5. .borderRadius(topLeft:20.vp,topRight:20.vp)
  6. .margin(top:-40)
  7. .padding(left:12,right:12)
复制代码
其实大家可以看到大部分代码和ArkTS还是比较类似的，现在直接来到最底部的热门推荐部分，这部分内容是有标题的，最好的实现方式是使用header，之前讲过仓颉的header写法有些不同，看一下代码：
  1. @Builder func itemHead(title:String,subTitle:String){
  2.   Row(5){
  3.     Text(title)
  4.       .fontColor(Color.BLACK)
  5.       .fontSize(18)
  6.       .fontWeight(FontWeight.Bold)
  7.           Text(subTitle)
  8.       .fontColor(13)
  9.       .fontColor(0x999999)
  10.   }
  11.   .height(60)
  12.   .width(100.percent)
  13.   .padding(left:12,bottom:13)
  14.   .alignItems(VerticalAlign.Bottom)
  15. }
  17. ListItemGroup(ListItemGroupParams(header:{=>bind(this.itemHead,this)('热门推荐','每天告诉大家值得买的')})){
  18. }
复制代码
以上就是银行App案例的相关内容，感谢阅读。##HarmonyOS语言##仓颉##金融理财#

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

使用道具 举报
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
恿榫
2025-6-26 07:35:23

0

粉丝关注

14

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫