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

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