【鸿蒙软件开发】ArkUI之容器组件Counter(计数器组件)、Flex(弹性布局)

news2025/1/14 0:52:35

文章目录

  • 前言
  • 一、Counter
    • 1.1 子组件
    • 1.2 接口
    • 1.3 属性
    • 1.4 事件
  • 1.5 示例代码
  • 二、Flex
      • 弹性布局到底是什么意思？
    • 2.1 权限列表
    • 2.2 子组件
    • 2.3 接口
      • 参数
    • 2.4 示例代码
      • 示例代码1
      • 示例代码2
  • 总结

前言

Counter容器组件：计数器组件，提供相应的增加或者减少的计数操作。
Flex容器组件：以弹性方式布局子组件的容器组件。

一、Counter

计数器组件，提供相应的增加或者减少的计数操作。

说明
该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

1.1 子组件

可以包含子组件。

1.2 接口

我们使用下面这个函数接口即可创建一个计数器容器

Counter()

在这里插入图片描述

他的样子如下图，没有我们熟悉的中间的数字，所以为什么说他是一个容器组件，就是因为他需要包含Text组件去显示具体的东西，提供可用性
在这里插入图片描述

从API version 9开始，该接口支持在ArkTS卡片中使用。

1.3 属性

支持通用属性。

1.4 事件

不支持通用事件和手势， 仅支持如下事件：

onInc(event: () => void)

在这里插入图片描述

2.名称： onInc
3.功能描述： 用于监听数值增加事件。当数值增加时，将触发指定的事件处理函数。
4.支持版本： 从API版本9开始，可在ArkTS卡片中使用。

onDec(event: () => void)

在这里插入图片描述

6.名称： onDec
7.功能描述： 用于监听数值减少事件。当数值减少时，将触发指定的事件处理函数。
8.支持版本： 从API版本9开始，可在ArkTS卡片中使用。

这些方法允许你在数值增加或减少时注册特定的事件处理函数，以便在发生相应事件时执行自定义操作。这对于与数值变化相关的用户界面交互非常有用。

1.5 示例代码

// xxx.ets
@Entry
@Component
struct CounterExample {
  @State value: number = 0

  build() {
    Column() {
      Counter() {
        Text(this.value.toString())
      }.margin(100)
      .onInc(() => {
        this.value++
      })
      .onDec(() => {
        this.value--
      })
    }.width("100%")
  }
}

在这里插入图片描述

我们添加的子组件就是上面我们的空白位置是添加的，这里我们是要++/–，然后显示，所以需要一个Text组件

二、Flex

以弹性方式布局子组件的容器组件。

说明
该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
Flex组件在渲染时存在二次布局过程，因此在对性能有严格要求的场景下建议使用Column、Row代替。
Flex组件主轴默认不设置时撑满父容器，Column、Row组件主轴不设置时默认是跟随子节点大小。

弹性布局到底是什么意思？

弹性布局是一种页面排列方式，就像把页面上的元素放在弹性的盒子里一样。这些元素可以根据屏幕大小和容器宽度来自动伸缩和重新排列，以适应不同的屏幕或窗口尺寸。
举个例子：想象你有一个网页上的按钮和文本框，它们通常排列在一行上。但如果用户在小屏幕手机上打开这个页面，你可能希望它们自动堆叠在一列，以适应有限的水平空间。这就是弹性布局的好处，它允许页面上的元素根据需要重新排列，以确保在不同设备上都能正常显示和使用，而不会显得拥挤或不可读。这种布局方式使得网页更具响应性，更适应各种屏幕大小，提供更好的用户体验。

2.1 权限列表

无

2.2 子组件

可以包含子组件。
你想，我们这个是布局，没子组件怎么行呢，所以肯定有子组件的，其他的容器各位也可以进行类比！

2.3 接口

Flex(value?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })

在这里插入图片描述

从API version 9开始，该接口支持在ArkTS卡片中使用。

参数

direction
参数名： direction
参数类型： FlexDirection
必填： 否
默认值： FlexDirection.Row
参数描述： 用于指定子组件在 Flex 容器上排列的方向，也就是主轴的方向。

wrap
参数名： wrap
参数类型： FlexWrap
必填： 否
默认值： FlexWrap.NoWrap
参数描述： 用于确定 Flex 容器是单行/列排列还是多行/列排列。在多行布局时，它还会通过交叉轴方向确定新行的堆叠方向。

justifyContent
参数名： justifyContent
参数类型： FlexAlign
必填： 否
默认值： FlexAlign.Start
参数描述： 用于定义所有子组件在 Flex 容器主轴上的对齐方式。

alignItems
参数名： alignItems
参数类型： ItemAlign
必填： 否
默认值： ItemAlign.Start
参数描述： 用于定义所有子组件在 Flex 容器交叉轴上的对齐方式。

alignContent
参数名： alignContent
参数类型： FlexAlign
必填： 否
默认值： FlexAlign.Start
参数描述： 用于定义在交叉轴中存在额外空间时，多行内容的对齐方式。此参数仅在 wrap 设置为 Wrap 或 WrapReverse 时生效。
这些参数用于控制 Flex 布局的各个方面，例如子组件的排列方向、对齐方式以及容器的包裹方式等，以便更好地控制界面布局。

2.4 示例代码

示例代码1

// xxx.ets
@Entry
@Component
struct FlexExample1 {
  build() {
    Column() {
      Column({ space: 5 }) {
        Text('direction:Row').fontSize(9).fontColor(0xCCCCCC).width('90%')
        Flex({ direction: FlexDirection.Row }) { // 子组件在容器主轴上行布局
          Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
          Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
          Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
          Text('4').width('20%').height(50).backgroundColor(0xD2B48C)
        }
        .height(70)
        .width('90%')
        .padding(10)
        .backgroundColor(0xAFEEEE)

        Text('direction:RowReverse').fontSize(9).fontColor(0xCCCCCC).width('90%')
        Flex({ direction: FlexDirection.RowReverse }) { // 子组件在容器主轴上反向行布局
          Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
          Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
          Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
          Text('4').width('20%').height(50).backgroundColor(0xD2B48C)
        }
        .height(70)
        .width('90%')
        .padding(10)
        .backgroundColor(0xAFEEEE)

        Text('direction:Column').fontSize(9).fontColor(0xCCCCCC).width('90%')
        Flex({ direction: FlexDirection.Column }) { // 子组件在容器主轴上列布局
          Text('1').width('100%').height(40).backgroundColor(0xF5DEB3)
          Text('2').width('100%').height(40).backgroundColor(0xD2B48C)
          Text('3').width('100%').height(40).backgroundColor(0xF5DEB3)
          Text('4').width('100%').height(40).backgroundColor(0xD2B48C)
        }
        .height(160)
        .width('90%')
        .padding(10)
        .backgroundColor(0xAFEEEE)

        Text('direction:ColumnReverse').fontSize(9).fontColor(0xCCCCCC).width('90%')
        Flex({ direction: FlexDirection.ColumnReverse }) { // 子组件在容器主轴上反向列布局
          Text('1').width('100%').height(40).backgroundColor(0xF5DEB3)
          Text('2').width('100%').height(40).backgroundColor(0xD2B48C)
          Text('3').width('100%').height(40).backgroundColor(0xF5DEB3)
          Text('4').width('100%').height(40).backgroundColor(0xD2B48C)
        }
        .height(160)
        .width('90%')
        .padding(10)
        .backgroundColor(0xAFEEEE)
      }.width('100%').margin({ top: 5 })
    }.width('100%')
  }
}

在这里插入图片描述

示例代码2

// xxx.ets
@Entry
@Component
struct FlexExample2 {
  build() {
    Column() {
      Column({ space: 5 }) {
        Text('Wrap').fontSize(9).fontColor(0xCCCCCC).width('90%')
        Flex({ wrap: FlexWrap.Wrap }) { // 子组件多行布局
          Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
          Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
          Text('3').width('50%').height(50).backgroundColor(0xD2B48C)
        }
        .width('90%')
        .padding(10)
        .backgroundColor(0xAFEEEE)

        Text('NoWrap').fontSize(9).fontColor(0xCCCCCC).width('90%')
        Flex({ wrap: FlexWrap.NoWrap }) { // 子组件单行布局
          Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
          Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
          Text('3').width('50%').height(50).backgroundColor(0xF5DEB3)
        }
        .width('90%')
        .padding(10)
        .backgroundColor(0xAFEEEE)

        Text('WrapReverse').fontSize(9).fontColor(0xCCCCCC).width('90%')
        Flex({ wrap: FlexWrap.WrapReverse , direction:FlexDirection.Row }) { // 子组件反向多行布局
          Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
          Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
          Text('3').width('50%').height(50).backgroundColor(0xD2B48C)
        }
        .width('90%')
        .height(120)
        .padding(10)
        .backgroundColor(0xAFEEEE)
      }.width('100%').margin({ top: 5 })
    }.width('100%')
  }
}

在这里插入图片描述

总结

下面这些容器组件对于我们ArkUI界面的开发非常重要，希望大家好好学。

Counter容器组件：计数器组件，提供相应的增加或者减少的计数操作。
Flex容器组件：以弹性方式布局子组件的容器组件。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1172846.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

基础课21——知识库管理

基础课21——知识库管理

1.知识库的概念、特点与功能 智能客服中的知识库是一个以知识为基础的系统，可以明确地表达与实际问题相对应的知识，并构成相对独立的程序行为主体，有利于有效、准确地解决实际问题。它储存着机器人对所有信息的认知概念和理解，这…
阅读更多...
【排序算法】 快速排序(快排)！图解+实现详解！

【排序算法】 快速排序(快排)！图解+实现详解！

🎥 屿小夏 ： 个人主页 🔥个人专栏 ： 算法—排序篇 🌄 莫道桑榆晚，为霞尚满天！ 文章目录 📑前言🌤️快速排序的概念☁️快速排序的由来☁️快速排序的思想☁️快速排序的实…
阅读更多...
网络运维Day02

网络运维Day02

文章目录 实验环境Linux系统简介Linux发行版RHEL与CentOS国产操作系统 安装CentOS7.9步骤一：虚拟硬件步骤二：为虚拟机安装操作系统为root设置密码首次初始化虚拟机 登录操作系统系统偏好设置 快照LINUX目录结构常见目录及其作用 LINUX磁盘表示方法LINUX中…
阅读更多...
Linux常用命令——chage命令

Linux常用命令——chage命令

在线Linux命令查询工具 chage 修改帐号和密码的有效期限 补充说明 chage命令是用来修改帐号和密码的有效期限。 语法 chage [选项] 用户名选项 -m：密码可更改的最小天数。为零时代表任何时候都可以更改密码。 -M：密码保持有效的最大天数。 -w&…
阅读更多...
毅速丨3D打印在压铸模上大有所为

毅速丨3D打印在压铸模上大有所为

压铸模是压铸件成型不可缺少的工具。它的作用是将液态的金属或合金浇入到预先准备好的型腔中，并在压力的作用下凝固、成形。3D打印技术在压铸模上的使用，尤其是随形水路的应用，将大幅度提升制造效率。 在传统的压铸模制造中，水路的…
阅读更多...
树结构及其算法-二叉排序树

树结构及其算法-二叉排序树

目录 树结构及其算法-二叉排序树 C代码 树结构及其算法-二叉排序树 事实上，二叉树是一种很好的排序应用模式，因为在建立二叉树的同时，数据已经经过初步的比较，并按照二叉树的建立规则来存放数据，规则如下&#xff1…
阅读更多...
Linux shell编程学习笔记21：用select in循环语句打造菜单

Linux shell编程学习笔记21：用select in循环语句打造菜单

一、select in循环语句的功能 Linux shell脚本编程提供了select in语句，这是 Shell 独有的一种循环语句，非常适合终端（Terminal）这样的交互场景，它可以根据用户的设置显示出带编号的菜单，用户通过输入不同…
阅读更多...
Draft-P802.11be-D3.2协议学习__$9-Frame-Format__$9.3.1.22-Trigger-frame-format

Draft-P802.11be-D3.2协议学习__$9-Frame-Format__$9.3.1.22-Trigger-frame-format

Draft-P802.11be-D3.2协议学习__$9-Frame-Format__$9.3.1.22-Trigger-frame-format 9.3.1.22.1 Genreal9.3.1.22.2 Common Info field9.3.1.22.3 Special User Info field9.3.1.22.4 HE variant User Info field9.3.1.22.5 EHT variant User Info field9.3.1.22.6 Basic Trigge…
阅读更多...
关于JADX和JEB的小问题

关于JADX和JEB的小问题

关于JADX和JEB的小问题 很久没水过技术文啦，最近也刚好遇到点小问题，特此记录 第一个问题 在处理app加密逻辑的时候一直拿不到正确的密文，反复看了反编译出来的代码（如下图） public static string n(String str, Stri…
阅读更多...
提升之做事方法

提升之做事方法

前言：在工作中，做事需要有一套方法，同样的一件事，不同的人去做，就能看到能力的差别，会产生不同的结果。那如何在工作中，提升自己做事的能力？ 目录 闭环思维 做事方法论 事前规划 …
阅读更多...
网络运维Day03

网络运维Day03

文章目录 基本命令使用查看文本文件内容-cat命令分页查看文本文件-less命令查看CPU信息-lscpu命令查看系统内核版本-uname命令查看机修改主机名-hostname命令查看IP地址-ifconfig命令创建目录-mkdir命令创建空文件-touch命令查看文件前几行-head命令查看文件后几行-tail命令快速…
阅读更多...
2024年CleanMyMac更新了哪些内容？

2024年CleanMyMac更新了哪些内容？

CleanMyMac作为一款专业的苹果电脑清理软件，它不仅仅能单纯的卸载不用、少用的应用，同时还支持：1、清理应用程序的数据文件，将应用重置回初始状态，减少空间占用；2、自动检查应用更新，保持应用的…
阅读更多...
Hyper-V 安装windows10 虚拟机，且能调试窗口大小、与主机之间复制文件

Hyper-V 安装windows10 虚拟机，且能调试窗口大小、与主机之间复制文件

1. 搜索栏--打开‘启动或关闭windows功能’-- 勾选 ‘ Hyper-V ’ 然后点击确定； 2. 搜索栏--打开‘ Hyper-V 快速创建’ ---本地安装源---更改安装源（选择 对应的 windows.iso 镜像）---创建镜像--启动虚拟机--（到达）P…
阅读更多...
优化｜随机零阶优化算法分析

优化｜随机零阶优化算法分析

原文：Random Gradient-Free Minimization of Convex Functions. Found Comput Math 17, 527–566 (2017). https://doi.org/10.1007/s10208-015-9296-2 原文作者：Yurii Nesterov, Vladimir Spokoiny 论文解读者：陈宇文 本次知识分享活动挑选…
阅读更多...
【中国知名企业高管团队】系列58：创维SKYWORTH

【中国知名企业高管团队】系列58：创维SKYWORTH

昨天华研荟介绍了位于深圳的彩电三巨头之一——康佳KONKA，今天介绍创维SKYWORTH。两家公司都是以做电视起家的，但是发展历程和现在的业务差别非常大，当然，过程中发生的故事也是波澜起伏。 一、关于创维 创维集团有限公司&#x…
阅读更多...
JAVA面经整理(10)

JAVA面经整理(10)

一)MyBatis有什么优缺点？ Mybatis是⼀种典型的半自动化的ORM 框架，所谓的半自动，因为还需要⼿动的写 SQL 语句在XML文件里面，再由框架根据SQL以及传入数据来进行组装成要执行的SQL，所谓的ORM框架，就是对象关…
阅读更多...
burpsuite进行拦截请求包

burpsuite进行拦截请求包

当我们进行正常访问浏览器时，进行勾选住如上内容，若我们需要进行拦截某个请求时，首先将如上勾选去掉，然后打开proxy下的Intercept，确保intercept is on 按钮打开。 然后打开intercept is on 按钮即可进行拦截请求
阅读更多...
温故知新-Redis01

温故知新-Redis01

目录 开场白-追命3连 使用场景 01缓存穿透场景与方案 02布隆过滤器 03缓存击穿场景与方案 04缓存雪崩场景与方案 开场白-追命3连 看你项目中有说用到Redis，都是哪些场景使用了Redis呢？ 如果发生了缓存穿透、击穿、雪崩如何应对呢？缓存…
阅读更多...
LangChain+LLM实战---ChatGPT的即时插件套件制作

LangChain+LLM实战---ChatGPT的即时插件套件制作

英文原文：Instant Plugins for ChatGPT: Introducing the Wolfram ChatGPT Plugin Kit 在一分钟内构建一个新插件 几周前，我们与OpenAI合作发布了Wolfram插件，使ChatGPT可以使用Wolfram语言和Wolfram|Alpha作为工具，在ChatGPT内部…
阅读更多...
Day 6 登录页以及路由（四）Vue页面处理

Day 6 登录页以及路由（四）Vue页面处理

系列文章目录 本系列记录一下通过Abp搭建后端，VueElement UI Plus搭建前端，实现一个小型项目的过程。 Day 1 Vue 页面框架Day 2 Abp框架下，MySQL数据迁移时，添加表和字段注释Day 3 登录页以及路由 (一）Day 4 登录页及…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023