当前位置：首页 > news >正文

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

news 来源：原创 2025/6/27 8:29:40

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

首先我们可以看到页面内容撑满了屏幕，所以需要设置沉浸模式，具体代码如下：

windowStage.getMainWindow().setWindowLayoutFullScreen(true)

接下来来到页面内容部分，这是一个可以滚动的列表布局，所以可以使用List容器，那么在List容器又可以分为几个模块：

有了清晰的思路接下来就可以每个部分逐个击破，最顶部的资产部分是有背景图片的，所以我们把图片和内容部分分开来看，每一个部分就都变得很简单了，具体代码如下：

Stack(){Image(@r(app.media.nav_img)).width(100.percent)Row(){Column(6){Row(){Text('总资产').fontSize(13).fontColor(Color.BLACK)Image(@r(app.media.eyes)).width(14).height(10).margin(left:5)}Text('****').fontSize(30).fontColor(Color.BLACK).fontWeight(FontWeight.Bold)Text('今日收益 +13.3').fontSize(12).fontColor(Color.GRAY)}.alignItems(HorizontalAlign.Start).margin(left:26)Row(){Image(@r(app.media.shield)).width(16).height(16)Text('开启保障').fontColor(Color.WHITE).fontSize(13).margin(left:6)}.width(102).height(30).justifyContent(FlexAlign.Center).backgroundColor(Color(0, 0, 0, alpha: 0.1)).borderRadius(topLeft:15.vp,bottomLeft:15.vp)}.width(100.percent).justifyContent(FlexAlign.SpaceBetween)}

接下来是功能按钮列表部分，这一部分需要注意的地方是它和上方资产内容有一些重叠，我的实现方式是给边距设置负数让它向顶部偏移，然后它的圆角只有上方的两个角，所以还要注意部分圆角的设置，参考代码如下：

Row(){
}
.width(100.percent)
.backgroundColor(Color.WHITE)
.borderRadius(topLeft:20.vp,topRight:20.vp)
.margin(top:-40)
.padding(left:12,right:12)

其实大家可以看到大部分代码和ArkTS还是比较类似的，现在直接来到最底部的热门推荐部分，这部分内容是有标题的，最好的实现方式是使用header，之前讲过仓颉的header写法有些不同，看一下代码：

@Builder func itemHead(title:String,subTitle:String){Row(5){Text(title).fontColor(Color.BLACK).fontSize(18).fontWeight(FontWeight.Bold)Text(subTitle).fontColor(13).fontColor(0x999999)}.height(60).width(100.percent).padding(left:12,bottom:13).alignItems(VerticalAlign.Bottom)
}ListItemGroup(ListItemGroupParams(header:{=>bind(this.itemHead,this)('热门推荐','每天告诉大家值得买的')})){
}

以上就是银行App案例的相关内容，感谢阅读。##HarmonyOS语言##仓颉##金融理财#