我是你叶-CSDN博客

原创【带你轻松学】ArkUI实战开发-初识 NAPI

NAPI 工程创建完后，在entry目录下多了一个cpphello.cppindex.d.ts文件中声明的方法的 C++ 实现源码。：是cmake用来生成Makefile文件需要的一个描述编译链接的脚本文件。index.d.ts：对 ts 提供的方法声明。：打包的配置文件。另外文件还会在"externalNativeOptions": { // CPP相关配置"path": "./src/main/cpp/CMakeLists.txt", // CMake 文件的路径。

2024-09-27 22:07:10 343

原创【带你轻松学】ArkUI实战开发-窗口模块（Window）

/ Winodw 的能力模块提供的静态方法及Windowcreate()：创建一个子窗口。find()：查找指定id所对应的窗口：获取当前应用内最后显示的窗口。show()：显示当前窗口。destroy()：销毁当前窗口。moveTo()：移动当前窗口。on()：监听窗口对应事件。off()：取消监听对应窗口事件。：设置窗口布局是否为全屏布局。：为当前窗口加载具体页面内容。：设置窗口的背景色。：设置导航栏、状态栏是否显示。：设置窗口是否全屏显示。

2024-09-27 21:19:34 238

原创【带你轻松学】ArkUI实战开发-页面导航（Navigation）

Navigation的定义不需要传递相关参数，我们先看下NavigationNavigation() { // Navigation只能包含一个子组件.size({width: '100%', height: '100%'}) // Navigation只设置了size，没有设置任何其它属性样例运行结果如下图所示：由运行结果可知，在默认情况下，Navigation的样式是一个带有返回箭头的标题栏加子控件组成的。title：设置导航栏的标题，当参数类型为string。

2024-09-27 20:24:07 177

原创【带你轻松学】ArkUI实战开发-页面跳转（Router、Ability）

push：打开新的页面，新页面在栈顶位置，定义了以下参数：url：目标页面的路径，该路径必须在的pages下配置，否则不起作用。params：可选参数，向目标页面传递参数。replace：新页面替换当前页面并把当前页面销毁。back：返回上一页。clear：清空路由栈里的其它页面。getLength：获取当前路由栈里的页面数量。getState：获取当前页面的状态，参数说明如下：index：当前页面是第几个打开的。path：当前页面的路径。name：当前页面的名称。

2024-09-27 17:55:29 361

原创【带你轻松学】ArkUI实战开发-手势密码（PatternLock）

reset();在使用的时候，接收一个类型的控制器，该控制器用来控制组件的状态，比如重置解锁状态。build() {sideLength：设置组件的宽度和高度，默认值为 300vp ，最小可以设置为 0。：设置宫格圆点的半径，默认值为 14vp。：设置宫格圆点在 “未选中” 状态的填充颜色，默认值为黑色。：设置宫格圆点在 “选中” 状态的填充颜色，默认值为黑色。：设置宫格圆点在 “激活” 状态的填充颜色，默认值为黑色。pathColor：设置连线的颜色，默认值为蓝色。

2024-09-27 17:30:16 215

原创【带你轻松学】ArkUI实战开发-网页加载（Web）

使用Web组件时，需要传递一个WebOptions类型的参数，WebOptionssrc：待加载的网页资源地址。controller：页面控制器，主要控制Web组件各种行为，一个对象只能控制一个Web组件，且必须在Web组件和绑定后，才能调用上的方法。// Web控制器build() {Web({src: "https://www.arkui.club", // 默认加载 www.arkui.club 网址})// 省略部分方法。

2024-09-27 16:26:06 399

原创【带你轻松学】ArkUI实战开发-视频播放（Video）

/ Video创建需要传递一个必要参数valuesrc?previewUri?controller?value：对播放视频相关设置，参数说明如下：src：设置视频地址。：设置视频播放倍速，参数说明如下：：只支持0.751.01.251.752.0。：对 number | string 的封装，防止用户传错参数的。previewUri：视频封面图的路径。controller：设置视频播放的控制器，比如控制视频开始，暂停等。muted：设置视频是否静音。autoPlay。

2024-09-27 16:00:41 109

原创【带你轻松学】ArkUI滚动类组件-下拉刷新（Refresh）

offset?friction?refreshing：控件是否显示刷新动画，默认不显示offset：下拉的偏移量，当下拉的距离超过该值时，控件进入刷新状态friction：下拉时的阻力系数，数值越大，下拉距离越小build() {})})：组件的刷新状态，定义了以下 5 种状态：Inactive：组件的起始状态，当手指点击屏幕时触发此状态。Drag：下拉组件但没有到达刷新距离的状态。OverDrag：下拉组件距离超过了刷新距离的状态。Refresh：正在刷新状态。Done。

2024-09-27 15:30:23 182

原创【带你轻松学】ArkUI滚动类组件-Swiper

controller：给Swiper绑定一个控制器，控制页面翻页。Swiper() {index：默认显示显示第几页，默认值为 0。autoPlay：是否自动播放，默认值为 false ，当设置为自动播放时，导航点无法点击。interval：设置自动播放时，播放的时间间隔，单位毫秒，默认是 3000。indicator：是否显示导航点指示器，默认显示。loop：是否开启循环显示，也就是说当翻页到最后一页再往下翻页是否会回到第一页，默认开启。duration。

2024-09-27 14:19:29 203

原创【带你轻松学】ArkUI滚动类组件-Grid、GridItem

(scroller?scroller：绑定一个滚动控制器，控制Grid的滚动。Grid() {ForEach(this.columns, (item) => { // ForEach语法，循环创建GridItemGridItem() { // 子组件只能是GirdItem}).columnsTemplate("1fr 1fr 1fr") // 设置Grid为3列，并且均分.columnsGap(10) // 设置列间距为10vp.rowsGap(10) // 设置行间距为10vp。

2024-09-27 13:42:01 659

原创【带你轻松学】ArkUI滚动类组件-Scroll、Scroller

(scroller?scroller：给Scroll绑定一个滚动控制器，该控制器可以控制子组件的各种滚动能力，Scroller目前只支持绑定到Scroll和List。Scroll() {Text('Text1')// 子组件的高度小于Scroll高度，不会触发滚动scrollable：设置Scroll的滚动方向，提供了以下 3 种滚动方向：Vertical（默认值）：仅支持竖直方向滚动。Scroll() {// Scroll没有设置滚动方向，默认竖直方向滚动Column() {

2024-09-26 21:47:19 713

原创【带你轻松学】ArkUI容器类组件-相对布局容器（RelativeContainer）

build() {.id("text1") // 必须添加 id，否则不显示.width(90).id("text2") // 必须添加 id，否则不显示.width(90)// .id("text3") // 注释掉id，组件不显示样例运行结果如下图所示：📢：由运行结果可知在默认情况下，子组件是按照堆叠排列并沿着自身左上角对齐。设置水平方向对齐的子组件在水平方向对齐方式分为leftmiddle和right设置子组件在水平方向上左边框设置子组件左边框相对锚点组件的左边框位置对齐。

2024-09-26 21:10:07 492

原创【带你轻松学】ArkUI容器类组件-计数器组件（Counter）

由源码可知，Counter使用时暂不需要配置额外参数。build() {Column() {Row() {Counter() // 默认效果Counter() { // 包含一个子组件Text('1') // Text 默认值为 1.fontSize(18) // Text 字体大小Counter没有提供额外的属性方法，只提供了onInc()和onDec()onInc：数字增加的事件回调。onDec：数字减少的事件回调。

2024-09-26 20:12:37 162

原创【带你轻松学】ArkUI容器类组件-角标组件（Badge）

position?maxCount?: number;position?Badge的构造方法允许接收和两种类型的参数，它们都继承自BadgeParamBadgeParamposition：设置 badge 的显示位置，提供了以下 3 种位置：Right： badge 显示在右侧纵向居中。RightTop（默认值）： badge 显示在右上角。Left： badge 显示在左侧纵向居中。style：设置 badge 的显示样式，BadgeStyle样式参数说明如下：color。

2024-09-26 17:45:34 224

原创【带你轻松学】ArkUI容器类组件-Tabs组件（Tabs、TabContent）

(value?index?: number;controller?Start,End,：指定页签位置来创建Tabs容器组件，定义了以下两种类型：Start（默认值）：当vertical属性方法设置为true时，页签位于容器左侧；vertical属性方法设置为false时，页签位于容器顶部。Endvertical属性方法设置为true时，页签位于容器右侧；vertical属性方法设置为false时，页签位于容器底部。index：指定初次初始页签索引，默认值为0。controller：设置。

2024-09-26 17:16:10 258

原创【带你轻松学】ArkUI容器类组件-侧边栏容器（SideBarContainer）

(type?type：设置侧边栏的显示类型，定义了一下 2 中类型：Embed：侧边栏嵌入到组件内，侧边栏和内容区并列显示。Overlay：侧边栏浮在内容区上面。build() {Column() {Text("侧边栏区域").width(10)Column() {Text("侧边栏区域")left?: number;top?: number;width?: number;height?: number;icons?

2024-09-26 16:41:57 293

原创【带你轻松学】ArkUI容器类组件-格栅布局容器（GridContainer）

(value?columns?sizeType?: SizeType;gutter?margin?value：设置布局的可选参数，columns：设置当前布局总列数，默认为auto。sizeType：设置选用设备宽度类型，SizeType参数说明如下：XS：最小宽度类型设备。SM：小宽度类型设备。MD：中等宽度类型设备。LG：大宽度类型设备。Auto（默认值）：根据设备类型进行选择。gutter：设置栅格布局列间距。margin：设置栅格布局两侧间距。

2024-09-26 16:14:33 261

原创【带你轻松学】ArkUI容器类组件-层叠布局容器（Stack）

(value?：设置子组件的对其方式，AlignmentTopStart：子组件在Stack内靠左上角对齐，简单样例如下所示：Text('Text3') // 被遮挡住了.width(60)Top：设置子组件在Stack内靠顶部水平居中对齐，简单样例如下所示：Text('Text3') // 被遮挡住了.width(60)TopEnd：设置子组件在Stack内部靠右上角对齐，简单样例如下所示：Text('Text3') // 被遮挡住了.width(60)Start：子组件靠Stack。

2024-09-26 15:32:32 353

原创【带你轻松学】 ArkUI容器类组件-弹性布局容器（Flex）

(value?direction?wrap?: FlexWrap;alignItems?value：设置子组件的排列样式，direction：设置子组件的的排列方向即主轴方向，Row（默认值）：子组件水平排列，即主轴为水平方向纵轴为竖直方向，子组件由左向右排列。RowReverse：子组件水平排列，即主轴为水平方向纵轴为竖直方向，子组件由右向左排列。Column：子组件竖直排列，即主轴为垂直方向，起点在上边，子组件由上到下排列。

2024-09-26 15:06:15 806

原创【带你轻松学】ArkUI容器类组件-线性布局容器（Row、Column）

(value?: { space?value：可选参数，space表示设置Row的子组件在水平方向上的间距，简单样例如下所示：Row() {Text().width(90)Text() // 模拟子组件之间的间隔为20.width(20)Text().width(20)Row({space: 20}) { // 设置子组件之间的间隔为20Text().width(90)Text().width(20)alignItems：参数类型为，表示子组件在竖直方向上的布局方式，Top。

2024-09-26 14:54:44 900

2401_87677001的博客