各位好,今日分享一个健身app的首页:

这个页面看起比之前的案例要稍微复杂一些,主要在于顶部部分,有重叠的背景,还有偏移的部分。重叠布局可以使用Stack容器实现,超出容器范围的偏移可以使用负数间距来实现,顶部部分的具体实现代码如下:

Column{
Text('February')
.fontColor(Color.WHITE)
.fontSize(14) Row{
Row{
Image(@r(app.media.goal))
.width(37)
.height(37)
Text('MY GOAL')
.fontColor(Color.WHITE)
.fontSize(30)
.fontWeight(FontWeight.Bolder)
.margin(left:6)
} Image(@r(app.media.cm_add))
.width(28)
.height(28) }
.margin(top:20)
.width(100.percent)
.justifyContent(FlexAlign.SpaceBetween)
.alignItems(VerticalAlign.Center)
}
.alignItems(HorizontalAlign.Start)
.padding(left:12,right:12,top:60)
.width(100.percent)
.height(220)
.linearGradient( direction: GradientDirection.Bottom, colors:[(Color(103, 76, 222, alpha: 1.0),0.0),(Color(129, 28, 219, alpha: 1.0),1.0)], repeating: false)
.borderRadius(bottomLeft: 20.vp, bottomRight: 20.vp)
Row{
Column(5){
Row(6){
Text('weight')
.fontColor(Color.GRAY)
.fontSize(11)
Image(@r(app.media.cm_down))
.width(15)
.height(15)
}
.justifyContent(FlexAlign.Center)
.alignItems(VerticalAlign.Center)
.width(80)
.height(20)
.borderRadius(10)
.border(width: 1.vp, color: Color(216, 216, 216, alpha: 1.0), radius:10.vp,style: BorderStyle.Solid)
Row(8){
Image(@r(app.media.cm_js))
.width(28)
.height(28)
Column(5){
Progress(value: 50.0, total: 100.0, `type`: ProgressType.Linear)
.width(100.percent)
.color(0x9570FF)
Row{
Text('250 lb')
.fontColor(Color.GRAY)
.fontSize(10)
Text('250 lb')
.fontColor(Color.GRAY)
.fontSize(10)
}
.width(100.percent)
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.SpaceBetween)
}
.layoutWeight(1)
}
.width(100.percent)
}
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Start)
.padding(10)
.width(100.percent)
.height(80)
.borderRadius(10)
.backgroundColor(Color.WHITE)
}
.width(100.percent)
.height(80)
.margin(top:-50)
.padding(left:12,right:12)

剩余的部分是滚动的列表,而且有标题,所以使用List容器来实现,关于List标题的使用大家要多多熟悉:

@Builder func itemHead(text:String) {
Row{
Text(text)
.fontColor(Color.GRAY)
.fontSize(13)
}
.width(100.percent)
.height(35)
.alignItems(VerticalAlign.Center)
.padding(top:3,left:10)
}
ListItemGroup(ListItemGroupParams(header:{=>bind(this.itemHead,this)('THIS WEEK')})){
}

需要注意的是,列表的第一行是可以横向滚动的列表,我这里选择使用Scroll容器:

Scroll{
Row(12){
Stack(Alignment.Bottom){
Image(@r(app.media.cm_s1))
.width(124)
.height(155)
Column(3){
Text('WALKING LUNGES')
.fontColor(Color.WHITE)
.fontSize(13)
.fontWeight(FontWeight.Bold)
Text('Today')
.fontSize(10)
.fontColor(Color.WHITE)
.backgroundColor(0x3EC7E6)
.height(16)
.width(68)
.borderRadius(8)
.textAlign(TextAlign.Center)
}
.alignItems(HorizontalAlign.Start)
.margin(bottom:8)
}
Stack(Alignment.Bottom){
Image(@r(app.media.cm_s2))
.width(124)
.height(155)
Column(3){
Text('WALKING LUNGES')
.fontColor(Color.WHITE)
.fontSize(13)
.fontWeight(FontWeight.Bold)
Text('Today')
.fontSize(10)
.fontColor(Color.WHITE)
.backgroundColor(0x3EC7E6)
.height(16)
.width(68)
.borderRadius(8)
.textAlign(TextAlign.Center)
}
.alignItems(HorizontalAlign.Start)
.margin(bottom:8)
}
Stack(Alignment.Bottom){
Image(@r(app.media.cm_s3))
.width(124)
.height(155)
Column(3){
Text('WALKING LUNGES')
.fontColor(Color.WHITE)
.fontSize(13)
.fontWeight(FontWeight.Bold)
Text('Today')
.fontSize(10)
.fontColor(Color.WHITE)
.backgroundColor(0x3EC7E6)
.height(16)
.width(68)
.borderRadius(8)
.textAlign(TextAlign.Center)
}
.alignItems(HorizontalAlign.Start)
.margin(bottom:8)
}
}
.padding(left:12,right:12)
}
.height(155)
.width(100.percent)

最后一部分比较简单,和上面代码类似,就不再赘述了。

今天的内容就是这样,感谢阅读。##HarmonyOS语言##仓颉##休闲娱乐#

HarmonyOS NEXT仓颉开发语言实战案例:健身App的更多相关文章

  1. 谷歌推出全新Android开发语言Sky:让App更流畅

    土豆网同步更新:http://www.tudou.com/plcover/VHNh6ZopQ4E/   使用HTML 创建Mac OS App 视频教程. 官方QQ群: (1)App实践出真知 434 ...

  2. Swift语言实战晋级

    Swift语言实战晋级基本信息作者: 老镇 丛书名: 爱上Swift出版社:人民邮电出版社ISBN:9787115378804上架时间:2014-12-26出版日期:2015 年1月开本:16开页码: ...

  3. 如何从40亿整数中找到不存在的一个 webservice Asp.Net Core 轻松学-10分钟使用EFCore连接MSSQL数据库 WPF实战案例-打印 RabbitMQ与.net core(五) topic类型 与 headers类型 的Exchange

    如何从40亿整数中找到不存在的一个 前言 给定一个最多包含40亿个随机排列的32位的顺序整数的顺序文件,找出一个不在文件中的32位整数.(在文件中至少确实一个这样的数-为什么?).在具有足够内存的情况 ...

  4. Python开发GUI实战:图片转换素描画工具!

    奋斗没有终点 好好学习72变,因为将来 没有人能替你阻挡81难 . 生如蝼蚁,当有鸿鹄之志: 命如纸薄,应有不屈之心 . ​ 今天被这句话触动了,所以开篇分享给大家.鸡汤有毒,但有时大家却靠它激励自己 ...

  5. Salesforce学习之路-developer篇(五)一文读懂Aura原理及实战案例分析

    1. 什么是Lightning Component框架? Lightning Component框架是一个UI框架,用于为移动和台式设备开发Web应用程序.这是一个单页面Web应用框架,用于为Ligh ...

  6. 盘它!基于CANN的辅助驾驶AI实战案例,轻松搞定车辆检测和车距计算!

    摘要:基于昇腾AI异构计算架构CANN(Compute Architecture for Neural Networks)的简易版辅助驾驶AI应用,具备车辆检测.车距计算等基本功能,作为辅助驾驶入门级 ...

  7. Swift语言实战晋级-第9章 游戏实战-跑酷熊猫-1

    学习目标 一.进一步学习Swift的游戏制作 二.掌握SKNode,SKSpriteNode的运用 三.了解SpriteKit的物理系统 四.掌握动作(SKAction)的运用 在这一章,我们要通过制 ...

  8. 用grunt搭建自动化的web前端开发环境实战教程(详细步骤)

    用grunt搭建自动化的web前端开发环境实战教程(详细步骤) jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用!前端自动化, ...

  9. C# Xamarin移动开发项目实战篇

    一.课程介绍 在前面阿笨的<C# Xamarin移动开发基础进修篇>课程中,大家已经熟悉和了解了Xamarin移动App开发的基础知识和原理.本次分享课<C# Xamarin移动开发 ...

  10. 《数据挖掘:R语言实战》

    <数据挖掘:R语言实战> 基本信息 作者: 黄文    王正林 丛书名: 大数据时代的R语言 出版社:电子工业出版社 ISBN:9787121231223 上架时间:2014-6-6 出版 ...

随机推荐

  1. [每日算法] leetcode第3题:无重复字符的最长子串

    leetcode第3题入口 题目描述 给定一个字符串 s ,请你找出其中不含有重复字符的 最长子串 的长度. 示例 1: 输入: s = "abcabcbb" 输出: 3 解法1: ...

  2. Tampermonkey 油猴脚本中文手册(出处:https://www.itblogcn.com/article/2233.html)

    文章目录 @name @namespace @copyright @version @description @icon, @iconURL, @defaulticon @icon64, @icon6 ...

  3. 请求的资源不支持 http 方法“GET”。

    错误重现 js ajax调用一个ASP.NET MVC写的api时,一直出现错误信息请求的资源不支持 http 方法"GET". 错误原因 ASP.NET MVC中的MVC(Web ...

  4. Service Reliability Management: A Comprehensive Overview

    Service Reliability Management: A Comprehensive Overview Service reliability management is a critica ...

  5. Lock 同步锁

    一. /* * 一.用于解决多线程安全问题的方式: * * synchronized:隐式锁 * 1. 同步代码块 * * 2. 同步方法 * * jdk 1.5 后: * 3. 同步锁 Lock * ...

  6. 几种JAVA表达式语言计算工具

    测试表达式工具分类 这里测试了几种方式,MS excel,Spring SEPL,MVEL,Google aviator import com.googlecode.aviator.AviatorEv ...

  7. web自动化:Javascript操作页面元素

    某些特殊情况下,使用selenium的api无法操作页面元素,可以通过js来完成 一.Js定位 js操作中的webelement通过console控制台来进行js定位: WebElement webe ...

  8. 11.23DP进阶总结

    例.1 Luogu-P1387最大正方形 按如下复杂度来分析 O(\(n^6\)) O(\(n^5\)) O(\(n^3\)) O(\(n^2\log n\)) O(n^2) O(\(n^6\)) 最 ...

  9. html input 是否允许浏览器字段默认值 或者之前输入的值

    autocomplete 属性是 HTML5 中的新属性,在input中autocomplete属性是默认开启的. 1.定义:autocomplete属性规范表单是否启用自动完成功能.自动完成允许浏览 ...

  10. 【代码】Python3|用Python PIL压缩图片至指定大小,并且不自动旋转

    代码主体是GPT帮我写的,我觉得这个功能非常实用. 解决自动旋转问题参考:一行代码解决PIL/OpenCV读取图片出现自动旋转的问题,增加一行代码image = ImageOps.exif_trans ...