仓颉语言商城应用的页面开发教程接近尾声了，今天要分享的是设置页面：导航栏还是老样式，介绍过很多次了，今天不再赘述。这个页面的内容主要还是介绍List容器的使用。可以看出列表内容分为三组，所以我们要用到ListItemGroup，不过第一组是没有标题的，所以可以直接使用ListItem，布局很简单，具体代码如下： ListItem{ Row(8){ Image(@r(app.media.chaofu)) .width(60.vp) .height(60) .borderRadius(30) Column(20){ Text('幽蓝计划') .fontSize(16) .fontColor(Col...

幽蓝君听说HarmonyOS 5.1版本即将推送，6.0版本也快要来了,表示十分期待。今天继续分享仓颉语言开发商城应用的实战教程，今天要分享的是订单详情页.我们今天应该是第一次遇到分为上中下三部分的页面，而且中间内容可以滚动，这样的布局如何设置呢，其实和之前一样，我们知道其中两个的高度，第三个容器使用layoutWeight属性就行了，这里使layoutWeight的依然是List组件，贴一下上下两部分的内容和List容器的整体布局代码： Column(){ Stack { Text('订单详情') .fontSize(16) .fontWeight(FontWeight.Bold) .fon...

连续分享了很多天鸿蒙仓颉语言的开发教程，大家现在应该都知道鸿蒙开发有ArkTs和仓颉两种开发语言，这两种语言有些相似，而且还支持混合开发，今天就分享一下怎么实现ArkTs和仓颉的混合开发，分不清这两种语言的友友今天可能要头疼了。官方文档对这两种语言的混合开发进行了非常大篇幅非常详细的介绍，但是幽蓝君自己学习完之后感觉不用那么麻烦，因为编译器能帮我们做绝大多数的工作。首先打开DevEco Studio新建项目，此处选择CangJie Hybrid即可创建混合开发项目：看一下创建后的结构目录：可以看到项目中分别有cangjie的目录和ArkTs的项目目录，大家仔细看一下可以发现项目的入口文件是在A...

大家上午好，最近不断有友友反馈仓颉语言和ArkTs很像，所以要注意不要混淆。今天要分享的是仓颉语言开发商城应用的订单列表页。首先来分析一下这个页面，它分为三大部分，分别是导航栏、订单类型和订单列表部分。导航栏由返回按钮和搜索框组成，这里要注意组件横向占满屏幕时要使用layoutWeight属性，导航栏部分的实现代码如下： Row(8) { Image(@r(app.media.back)) .width(22) .height(22) .onClick({evet => Router.back()}) Search(placeholder: "搜索").height(...

在移动应用中，各种列表页面离不开下拉刷新和上拉加载更多，我们的商城应用也是如此。今天介绍一下在仓颉开发语言中如何实现这一功能。下拉刷新仓颉开发语言直接提供了下拉刷新的组件，叫做Refresh，使用起来也非常方便: @State var headerLoading : Bool = false; Refresh(RefreshParams(refreshing: @Binder(this.headerLoading))) { List{ ForEach(this.carList, itemGeneratorFunc:{ item:CarItem, index: Int64 => ListI...

各位好，幽蓝君又来分享仓颉开发教程了，今天的内容是店铺详情页：这个页面的内容看似简单，其实有很多小细节需要注意，主要还是让大家熟悉List容器的使用。整个页面由导航栏和List容器两大部分组成，导航栏我们已经分享过多次，今天不再赘述。主要说一下List部分。首先需要注意的是在有自定义导航栏的情况下如何让List占满剩余屏幕，你可以设置layoutWeight属性： List{ } .width(100.percent) .layoutWeight(1) .backgroundColor(Color(247, 247, 247, alpha: 1.0)) 在List容器中，大部分内容都可以直接使...

大家上午好，今天来聊一聊仓颉开发语言中的动画开发。仓颉中的动画通常有两种方式，分别是属性动画和显示动画，我们今天以下面的加载动画为例，使用显示动画和属性动画分别实现一下，看看他们有什么区别。显示动画显示动画是幽蓝君比较习惯使用的方式，它主要依赖animateTo方法来实现。首先我要现在页面上添加加载图片，并且将它的角度设置为变量。仓颉语言这里有一个奇怪的地方，角度属性只设置angle的话是无效的，必须同时设置z和angle： @State var angle:Float32 = 0.0 Column{ Image(@r(app.media.loading)) .width(70) .heigh...

又到了高考的日子，幽蓝君在这里祝各位考生朋友冷静答题，超常发挥。今天要分享的内容是仓颉语言商城应用的个人中心页面，先看效果图：下面介绍下这个页面的实现过程。我们可以先分析下整个页面的布局结构。可以看出它是纵向的布局，整个页面由导航栏、个人资料、vip横条和我的订单几部分构成。导航栏我们遇到过很多次了，需要注意的地方就是让标题居中，返回图标靠左。最简单的办法让它俩不在一个层级上，互不影响，所以我们使用层叠布局实现： Stack { Text('个人中心') .fontSize(16) .fontWeight(FontWeight.Bold) .fontColor(Color.BLACK) Row...

大家好，今天来分享一下仓颉开发语言中的状态存储。主要介绍AppStorage和PersistentStorage两部分内容。AppStorageAppStorage是应用全局级的状态存储，可以在应用的任何地方随时使用。先介绍一下AppStorage的存储方法，有set和setOrCreate两种方式，区别是set只能设置已经创建了的字段的值，相当于修改值，而setOrCreate方法的作用是如果没有字段时会自动创建，所以我推荐大家使用setOrCreate方法。 let store1 = AppStorage.set('name', 'youlan'); let store2 = AppSto...

大家好，今天要分享的是仓颉语言商城应用的搜索页。搜索页的内容比较多，都有点密集恐惧症了，不过我们可以从上至下将它拆分开来，逐一击破。导航栏搜索页的的最顶部是导航栏，由返回按钮和搜索框两部分组成,比较简单，具体实现代码如下： Row(6){ Image(@r(app.media.back)) .width(30) .height(30) .onClick({evet => Router.back()}) Row{ Search(value: "", placeholder: "搜索商品") .searchButton("搜索") ...

听说Pura80要来了？感觉华为的新品像下饺子一样，让人目不暇接，每隔几天就有发布会看，真不错呀。节后第一天，为了缓解大家假期的疲惫，咱们今天做点简单的内容，就是商城的登录页面。其实这一次分享的仓颉语言商城应用沿用了之前ArkTs版本的商城页面，幽蓝君认为这个应用复杂程度和难度都很适中，适合大多数友友系统的学习仓颉语言。也能感受一下仓颉语言和Arkts在各个方面的不同之处。登录页面的代码就和Arkts非常类似，如果你不是对这两个语言非常熟悉甚至不容易看出这些细微的差别，但正是这些细微差别让人不知所措。比如颜色的写法，仓颉语言的枚举类型变成了大写，另外不支持字符串类型，但是支持UInt32类型，...

前些天发现一个问题，鸿蒙官方的进度条组件Progress虽然提供了比较丰富的功能，但是有时候还是不能满足开发的需要。比如有时候我需要在进度条上有个圆点来控制进度，Progress就没有提供这种样式，所以今天就跟大家分享一下自定义进度条的实现过程。这里我使用层叠布局，将黑色的总长度部分和白色部分进行层叠，白色部分的直线和圆点使用横向布局，当进度变化时只需要修改白色直线部分的长度，圆点会自动跟随移动。然后给圆点添加拖动手势，这样一个带圆点的进度条就完成了，比较简单，直接把封装好的完整代码贴在下面： import { componentUtils } from "@kit.ArkUI&qu...

大家上午好，仓颉语言商城应用的开发进程已经过半，不知道大家通过这一系列的教程对仓颉开发是否有了进一步的了解。今天要分享的购物车页面：看到这个页面，我们首先要对它简单的分析一下。这个页面一共分为三部分，分别是导航栏、购物车列表和底部的结算栏。也能它们是column布局，那么怎么样让这三部分刚好撑满整个页面，有一个简单的办法：给导航栏和结算栏一个固定的高度，然后给List组件设置layoutWeight(1)属性即可。写一个简单的页面结构: Column{ Row{ //导航栏 } .width(100.percent) .height(60) List{ //购物车列表 } .width(100...

今天又到了大家喜闻乐见的科普环节，也可以说是踩坑环节，哈哈哈。今天聊一聊仓颉开发语言中的计时器，这部分可老有意思了。为什么这么说呢，因为关于仓颉的计时器你几乎搜不到任何的文档，也没有相关的代码提示，可以说是一写一个不吱声。但是它还是被幽蓝君发现了蛛丝马迹，今天就把它分享给大家。仓颉的计时器藏在std.sync包里，名字叫Timer，但是使用时只导入Timer包还不够，我们需要导入这几个模块： import std.time.* import std.sync.Timer import std.sync.CatchupStyle 计时器的写法也是别出心裁，它有几种模式，下面为大家一一介绍 Tim...