仓颉语言的商城项目基本开发结束啦，今天跟大家分享新的项目，一个银行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语言##仓颉##金融理财#
