大家周末好，今天依然为大家分享之前使用ArkTS实现过的案例，一个电影App，今天使用仓颉的UI再次实现，看看仓颉和ArkTs有哪些相同和不同之处。在开始写代码之前，我们依然先分析一下页面的结构，这个页面整体是一个上下滚动的列表，所以使用List容器实现。在List容器内部的元素可以分为三个部分，最上面是轮播图，接下来是分类的可以左右滑动的列表，最底部是影片影响，是一个网格布局。现在我们可以着手写代码，先看最上面的轮播图，仓颉语言提供了Swiper组件，可以很方便的实现轮播图的很多功能效果。下面为大家演示它的基本使用： var controller: SwiperController = Sw...

各位周末好，今天为大家来仓颉语言外卖App的实战分享。我们可以先分析一下页面的布局结构，它是由导航栏和List容器组成的。幽蓝君目前依然没有找到仓颉语言导航栏的系统组件，还是要自定义，这个导航栏有三部分内容，可以使用两端对齐，要注意的是，如果需要中间部分在页面中间需要两端的内容宽度相同。导航栏和页面的布局结构代码如下： Column{ Row{ Text('幽蓝外卖') .fontColor(Color.BLACK) .fontSize(17) Row(6){ Image(@r(app.media.wm_m1)) .width(16) .height(16) Text('黄埔江岸') .fon...

各位好，今日分享一个健身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) .fontWe...

大家周末好，本文分享一个小而美的旅行app首页，效果图如下：在开始写代码之前，我们还是先理一下整个页面的结构，它整体是一个滚动的列表，所以要使用List组件。而且这个页面是没有导航栏的，但是为了更好的使用组件导航，我们还是要使用Navigation组件，并且隐藏头部内容，像这样： pathStack: NavPathStack = new NavPathStack(); Navigation(this.pathStack){ } .width('100%') .height('100%') .hideTitleBar(true) 接下来，在List容器内部又分为几个不同的部分，分别是个人信息部...

上文分享了如何使用仓颉语言实现动态广场，动态广场中有很多图片，本文一下如何使用仓颉语言实现一个图片放大预览器：看到这个效果，我首先想到的实现方案是弹窗，弹窗的弹出和消失效果为我们节省了很多工作，这里使用的是CustomDialogController。我们首先实现弹窗内容组件，图片预览可能会有不同数量的图片，我们要做好适配，还要实现翻页效果，所以使用swiper容器最为合适，具体代码如下，大家要注意接收参数的定义和弹窗点击关闭代码的写法： package ohos_app_cangjie_entry import ohos.base.* import ohos.component.* impo...

大家好，今日要分享的是使用仓颉语言开发广场页面，也比较像朋友圈页面：整个页面分为两部分，分别是导航栏和状态列表，导航栏比较简单，我们可以先写下导航栏的具体代码和页面的基本结构： Column{ Row(10){ Text('推荐') .fontColor(Color.BLACK) .fontSize(17) .fontWeight(FontWeight.Bold) Text('关注') .fontColor(Color.GRAY) .fontSize(16) } .width(100.percent) .height(60) .justifyContent(FlexAlign.Center) ...

偶然间看到一个非常美观的音乐播放器设计图，忍不住想拿仓颉语言来练练手，当漂亮的设计图遇到优美的开发语言，简直是天作之合，先给大家欣赏一下美美的效果图：按照惯例，在开始写代码之前，我们先对页面的整体结构做一下简单的分析，首先这个页面有导航栏，但是要注意导航栏的标题是在中间的，在系统的Navigation组件无法做到将标题居中，所以我们需要自定义导航栏。定义导航栏时我选择使用Stack布局来使标题在独立的空间内，从而达到完全居中不受其他组件的影响。除了导航栏之外，其他部分内容是竖向的布局，从上到下依次为歌曲封面、歌曲信息、播放进度条、音频控制栏和最底部的歌词控制栏。页面的整体结构代码如下： Col...

大家上午好，今天分享一下仓颉开发语言实现的画板案例。最近总是有同学说我写ArkTS冒充仓颉，为了自证清白，截图给大家看一下，确实是仓颉文件：仓颉提供了画布组件Canvas，我们所有的绘制工作都要在画布上进行，所以首先在页面添加一个足够大的画布组件： Canvas(this.context) .backgroundColor(0xffff00) .width(100.percent) .height(100.percent) 看到上面的代码，大家可能会问this.context是什么，幽蓝君将它比作画笔，使用画笔在画布上作画，context可以绘制图形、文本、图片等内容。画笔的样式是可以修改的，...

仓颉语言的商城项目基本开发结束啦，今天跟大家分享新的项目，一个银行app，说是新项目但是大家可能会有些眼熟，在ArkTS的教程中就写过这个项目。今天我们仓颉语言再写一遍，看看和ArkTS有什么不同。首先我们可以看到页面内容撑满了屏幕，所以需要设置沉浸模式，具体代码如下： windowStage.getMainWindow().setWindowLayoutFullScreen(true) 接下来来到页面内容部分，这是一个可以滚动的列表布局，所以可以使用List容器，那么在List容器又可以分为几个模块：有了清晰的思路接下来就可以每个部分逐个击破，最顶部的资产部分是有背景图片的，所以我们把图片和...

大家好，今天想跟大家分享一下仓颉开发语言中的数据类型，主要是和ArkTS相比差别比较大的类型。数字仓颉中的数字类型复杂多样，首先分为整型和浮点型两种，也就是Int类型和Float类型，Int类型有Int、Int8、Int32、Int64几种类型，Float也有Float16、Float32和Float64几种类型，下面为大家介绍它们的区别。其实无论是Int8、Int32还是Int64，它们都属于整型，只不过是长度上的区别。比如Int8最短，只占用1个字节；Int16占用2个字节，等同于short；Int32占用4个字节，它等同于Int；Int64占用8个字节，等同于long数组仓颉数组类型比较...

今天体验了一下在开发者大会上见到的CodeGenie，非常棒。AI正在影响着各行各业，这几天幽蓝君对此深有感触，身为打工人要保持不断学习的状态，不然就有可能被替代。今天跟大家分享一下在仓颉开发语言中如何使用数据库。我们这里说的是关系型数据库，首先还是要引入对应的模块，仓颉语言中关系型数据库的模块是： import ohos.relational_store.* 接下来数据库的操作流程可能很多友友都比较熟悉了，依次是获取数据库、建表，然后进行增删改查等操作，在任何开发语言中都是这样的步骤。不过仓颉的写法可能会有些不同。仓颉获取数据的方法是： getRdbStore(context, config...

大家好，今天跟大家分享一下仓颉开发语言中的全屏模式。和ArkTS一样，仓颉的新建项目默认是非全屏模式的，如果你的应用颜色比较丰富，就会发现屏幕上方和底部的留白，这是应用自动避让了屏幕上方摄像头区域和底部的导航条区域。但是通常我们不需要这些留白，而是希望应用占满整个屏幕，这时候需要用到沉浸模式，下面为大家分享具体的实现过程。首先，来到应用的main_ability.cj文件的onWindowStageCreate方法下，设置全屏模式我们要先获取到主窗口，然后设置全屏，实现代码如下： windowStage.getMainWindow().setWindowLayoutFullScreen(tru...

今天要分享的是仓颉开发语言中的懒加载。先和初学者朋友们解释一下什么是懒加载。懒加载在代码中叫做LazyForEach，看到名字你一定能猜到它和ForEach的功能类似。只不过和ForEach的一次性加载所有数据不同，懒加载会根据屏幕可使区域按需加载数据，并且当内容滑出屏幕范围时，懒加载又会自动将这些内容销毁。所以懒加载对于程序的性能有显著的优化，对于用户的体验也有大幅的提升，这一点幽蓝君在ArkTs语言中已经做过对比。当数据比较多比较大的时候强烈建议大家使用懒加载。LazyForEach的用法和ForEach相比较为麻烦一些，它的数据源要求IDataSource类型，我们需要先自定义这个数据类...

大家下午好。昨天分享了消息列表页面，今天继续分享聊天页面的开发过程：这个页面又是常见的上中下布局，从上至下依次为导航栏、聊天列表和输入框工具栏，我们可以先写一下简单的结构，最上面导航栏是横向布局，所以写个Row容器，中间是List，底部仍然是Row容器，导航栏和底部输入框的高度是固定的，List不确定，所以给List设置layoutWeight属性它自动撑满屏幕，具体代码是这样的： Row{ } .width(100.percent) .height(60) List{ } .width(100.percent) .layoutWeight(1) Row{ } .width(100.perce...