又到了高考的日子，幽蓝君在这里祝各位考生朋友冷静答题，超常发挥。今天要分享的内容是仓颉语言商城应用的个人中心页面，先看效果图：下面介绍下这个页面的实现过程。我们可以先分析下整个页面的布局结构。可以看出它是纵向的布局，整个页面由导航栏、个人资料、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...

放假闲来无事，继续跟大家分享仓颉语言的开发教程，今天介绍一下自定义弹窗。仓颉语言中的自定义弹窗和ArkTs类似，但是还是有一些不同的地方。在仓颉中通过CustomDialogController实现自定义弹窗，在弹窗中使用构造函数CustomDialogControllerOptions来传递弹窗的所有参数,为大家贴一段演示代码： var dialogController: CustomDialogController = CustomDialogController(CustomDialogControllerOptions( builder: loadingdialog(), custom...

今天继续为大家带来仓颉语言开发商城应用的实战教程，今天的内容是实现商品分类页。分类页面要在基本布局的基础上增加一些动态效果，比如点击状态的切换和两个列表容器的联动。下面为大家详细介绍。分类列表先来看左侧的分类列表，很明显是一个List容器，样式上比较简单，只有一个文本，不过它有个点击状态的切换效果。在添加组件之前，我们需要先请求到分类的数据，关于仓颉语言的网络请求上一篇文章已经分享过，下面再贴一下分类列表的网络请求具体代码，要注意的是，嵌套数据的修改需要使用ObservedArrayList修饰才能在页面上实时变化： @State var classList:ObservedArrayList...

现在我能理解华为方面不断的鼓励大家在网络上贡献自己的教程。没有教程，没有参考文献，仓颉购物应用的开发过程真是举步维艰，每一步都是摸着石头过河，不过希望通过幽蓝君的文章能让大家少走一些弯路。今天就以购物应用的分类列表为例，分享在仓颉开发语言中如何进行网络请求，以及怎么把请求到的数据展示到应用上。网络权限网络权限在app开发中是一个默认规则，几乎在任何系统的app中进行网络请求之前都要获取网络权限，仓颉也不例外。在仓颉语言中网络权限的请求依然是在module.json5文件中，在module目录下增加网络请求权限： "requestPermissions": [{"n...

大家早上好，今天要分享的内容是仓颉开发语言中的生命周期。其实幽蓝君比较喜欢分享实战写代码，不太喜欢讲太理论的东西，今天之所以单独写一篇文章分享生命周期的内容，因为这部分内容如果不讲一下还真是容易踩坑。生命周期指的是页面或者组件从加载、显示到消失的过程，在这个过程中会有一些系统事件，我们可以在其中进行一些操作。比如ArkTs中有aboutToAppear()、onPageShow()等方法。那么仓颉中的生命周期是什么样的呢？如果你对仓颉毫不了解，只能顺着ArkTs的方式试着去写，你会发现仓颉中没有任何关于这部分的代码提示，然后你硬着头皮完全手写下aboutToAppear、onPageShow等...

关于仓颉开发语言我们已经连续分享了很多天，相信大家对于仓颉开发语言已经有了一定的了解。今天我们继续进阶，分享一个仓颉开发语言中的自定义组件知识。本文案例就以上一篇文章中的自定义tabbar为例，因为我们自己开发的tabbar一直放在index.cj文件中总是不太好的，还是要把它拿出来封装一下。为了较大型项目的文件管理，我在cangjie文件夹下创建了components文件夹，然后在这里创建组件文件，我创建的是yltabbar.cj.创建文件之后，可以看到依然是初始化了一行代码，我们还是把四大引用拿过来，然后添加build方法，注意自定义组件就不需要@Entry来修饰了，只用@Componen...

大家周末好呀，今天继续分享仓颉语言开发商城应用的实战教程，今天要做的是tabbar。大家都知道ArkTs有Tabs和TabContent容器，能够实现上图的样式，满足基本的使用需求。而仓颉就不同了，它虽然也有这两个组件，但是它的tabbar参数只支持传入图片或者文字，不能像ArkTs那样能传入组件,所以在仓颉语言中官方的tabbar局限性非常大。给大家实操讲解一下，下面是一段Tabs的基本写法： Tabs(BarPosition.End, this.controller){ TabContent(){ Text('页面1') } TabContent(){ Text('页面2’) } } 如果...

前两天分别实现了商城应用的首页和商品详情页面，今天要分享新的内容，就是这两个页面之间的相互跳转和传递参数。首先我们需要两个页面。如果你的项目中还没有第二个页面，可以右键cangjie文件夹新建仓颉文件：新建的文件里面没什么内容，我们给他添加上4个基础的引用，再简单添加个按钮： package ohos_app_cangjie_entry.page import ohos.base.* import ohos.component.* import ohos.state_manage.* import ohos.state_macro_manage.* @Entry @Component publ...