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