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

文章目录

  • 前言
  • 一、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容器组件：以弹性方式布局子组件的容器组件。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Zinx框架-游戏服务器开发003：架构搭建-需求分析及TCP通信方式的实现

Zinx框架-游戏服务器开发003：架构搭建-需求分析及TCP通信方式的实现

文章目录 1 项目总体架构2 项目需求2.1 服务器职责2.2 消息的格式和定义 3 基于Tcp连接的通信方式3.1 通道层实现GameChannel类3.1.1 TcpChannel类3.1.2 Tcp工厂类3.1.3 创建主函数，添加Tcp的监听套接字3.1.4 代码测试 3.2 消息类的结构设计和实现3.2.1 消息的定义3…
阅读更多...
Pycharm的安装与基本使用

Pycharm的安装与基本使用

Pycharm的安装与基本使用 一、Pycharm介绍1.1 Pycharm简介1.2 Pycharm特点 二、Pycharm软件下载2.1 Pycharm官网2.2 下载Pycharm 三、安装Pycharm3.1 指定安装目录3.2 勾选安装选项3.3 选择菜单目录3.4 安装成功 四、Pycharm的初始配置4.1 新建工程4.2 选择Python解释器4.3 打开…
阅读更多...
【自动化测试教程】Java+Selenium自动化测试环境搭建

【自动化测试教程】Java+Selenium自动化测试环境搭建

本主要介绍以Java为基础，搭建Selenium自动化测试环境，并且实现代码编写的过程。 1.Selenium介绍 Selenium 1.0 包含 core、IDE、RC、grid 四部分，selenium 2.0 则是在两位大牛偶遇相互沟通决定把面向对象结构化（OOPP&#xff09…
阅读更多...
ZZ038 物联网应用与服务赛题第J套

ZZ038 物联网应用与服务赛题第J套

2023年全国职业院校技能大赛 中职组 物联网应用与服务 任 务 书 （J卷） 赛位号：______________ 竞赛须知 一、注意事项 1.检查硬件设备、电脑设备是否正常。检查竞赛所需的各项设备、软件和竞赛材料等； 2.竞赛任务中所使用…
阅读更多...
教你烧录Jetson Orin Nano的ubuntu20.04镜像

教你烧录Jetson Orin Nano的ubuntu20.04镜像

Jetson Orin Nano烧录镜像 视频讲解 教你烧录Jetson Orin Nano的ubuntu20.04镜像 1. 下载sdk manager https://developer.nvidia.com/sdk-manager sudo dpkg -i xxxx.deb2. 进入recovery 插上typeC后，短接J14的FORCE_RECOVERY和GND，上电 如下图&#…
阅读更多...
J2EE项目部署与发布（Linux版本）-＞jdktomcat安装,MySQL安装,后端接口部署,linux单体项目前端部署

J2EE项目部署与发布（Linux版本）-＞jdktomcat安装,MySQL安装,后端接口部署,linux单体项目前端部署

jdk&tomcat安装MySQL安装后端接口部署linux单体项目前端部署 1.jdk&tomcat安装 上传jdk、tomcat安装包 解压两个工具包 #解压tomcat tar -zxvf apache-tomcat-8.5.20.tar.gz #解压jdk tar -zxvf jdk-8u151-linux-x64.tar.gz 配置并且测试jdk安装 #配置环境变量 vim /e…
阅读更多...
MySQL Binlog实战应用之一

MySQL Binlog实战应用之一

一、前言 开发业务系统尤其是与财务相关的系统，需要记录每一笔变更操作的日志，这一般有两种实现方案。 1、代码中通过AOP实现，提供注解跟踪记录日志，这种方案能够比较清晰地以业务角度记录操作日志，但记录变更前的旧…
阅读更多...
SpringCloud Alibaba Demo(Nacos,OpenFeign,Gatway,Sentinel)

SpringCloud Alibaba Demo(Nacos,OpenFeign,Gatway,Sentinel)

开源地址： ma/springcloud-alibaba-demo 简介 参考：https://www.cnblogs.com/zys2019/p/12682628.html SpringBoot、SpringCloud 、SpringCloud Alibaba 以及各种组件存在版本对应关系。可参考下面 版本对应 项目前期准备 启动nacos. ./startup.c…
阅读更多...
Spring Data Redis + RabbitMQ - 基于 string + hash 实现缓存，计数（高内聚）

Spring Data Redis + RabbitMQ - 基于 string + hash 实现缓存，计数（高内聚）

目录 一、Spring Data Redis 1.1、缓存功能（分析） 1.2、案例实现 一、Spring Data Redis 1.1、缓存功能（分析） hash 类型存储缓存相比于 string 类型就有更多的更合适的使用场景. 例如，我有以下这样一个 UserInfo 信息 假设这样一个场景就是：万一只想获取其中某一个…
阅读更多...
【蓝桥杯省赛真题42】Scratch舞台特效 蓝桥杯少儿编程scratch图形化编程 蓝桥杯省赛真题讲解

【蓝桥杯省赛真题42】Scratch舞台特效 蓝桥杯少儿编程scratch图形化编程 蓝桥杯省赛真题讲解

目录 scratch舞台特效 一、题目要求 编程实现 二、案例分析 1、角色分析
阅读更多...
uni-app---- 点击按钮拨打电话功能点击按钮调用高德地图进行导航的功能【安卓app端】

uni-app---- 点击按钮拨打电话功能点击按钮调用高德地图进行导航的功能【安卓app端】

uniapp---- 点击按钮拨打电话功能&&点击按钮调用高德地图进行导航的功能【安卓app端】 先上效果图： 1. 在封装方法的文件夹下新建一个js文件，然后把这些功能进行封装 // 点击按钮拨打电话 export function getActionSheet(phone) {uni.showAct…
阅读更多...
基于设深度学习的人脸性别年龄识别系统 计算机竞赛

基于设深度学习的人脸性别年龄识别系统 计算机竞赛

文章目录 0 前言1 课题描述2 实现效果3 算法实现原理3.1 数据集3.2 深度学习识别算法3.3 特征提取主干网络3.4 总体实现流程 4 具体实现4.1 预训练数据格式4.2 部分实现代码 5 最后 0 前言 🔥 优质竞赛项目系列，今天要分享的是 基于深度学习机器视觉的…
阅读更多...
MySQL中表的增删改查

MySQL中表的增删改查

目录 一、CRUD 二、新增（Create） （1）语法 （2）单行数据全列插入 （3）多行数据指定列插入 三、查询（Retrieve） （1）语法 …
阅读更多...
Win11新电脑启动无无线网络连接解决办法

Win11新电脑启动无无线网络连接解决办法

Win11新电脑启动无无线网络连接解决办法 前言一、解决方法 前言 今天笔者在使用学校实验室分配的新电脑时候，发现在新激活的时候需要让我连接到无线网络，但不管鼠标怎么点都操作不了，于是在卡在这里了，唯一的办法就是跳过此页面&…
阅读更多...
ZZ038 物联网应用与服务赛题第D套

ZZ038 物联网应用与服务赛题第D套

2023年全国职业院校技能大赛 中职组 物联网应用与服务 任 务 书 （D卷） 赛位号：______________ 竞赛须知 一、注意事项 1.检查硬件设备、电脑设备是否正常。检查竞赛所需的各项设备、软件和竞赛材料等； 2.竞赛任务中所使用的各类软件工具、软件安装文件等，都…
阅读更多...
吴恩达《机器学习》5-6:向量化

吴恩达《机器学习》5-6:向量化

在深度学习和数值计算中，效率和性能是至关重要的。一个有效的方法是使用向量化技术，它可以显著提高计算速度，减少代码的复杂性。接下来将介绍向量化的概念以及如何在不同编程语言和工具中应用它，包括 Octave、MATLAB、Python、Num…
阅读更多...
2023辽宁省数学建模B题数据驱动的水下导航适配区分类预测完整原创论文分享（python求解）

2023辽宁省数学建模B题数据驱动的水下导航适配区分类预测完整原创论文分享（python求解）

大家好呀，从发布赛题一直到现在，总算完成了辽宁省数学建模B题完整的成品论文。 本论文可以保证原创，保证高质量。绝不是随便引用一大堆模型和代码复制粘贴进来完全没有应用糊弄人的垃圾半成品论文。 B用Python＋SPSSPRO求解&…
阅读更多...
蓝桥杯每日一题2023.11.3

蓝桥杯每日一题2023.11.3

题目描述 承压计算 - 蓝桥云课 (lanqiao.cn) 题目分析 将重量存入a中，每一层从上到下进行计算，用d进行计算列的重量，当前d的重量应为正上数组和右上数组的个半和并加上自身的重量 计算到30层记录最大最小值，进行比例运算即可 …
阅读更多...
工作数字化的中国历程 ｜ 从 OA 到 BPM 到数字流程自动化

工作数字化的中国历程 ｜ 从 OA 到 BPM 到数字流程自动化

业务流程是由“活动”（或称“工作任务”）构成的，在企业里的所有工作是不是都叫流程，或者属于流程的一部分，这个概念很绕，我觉得没有必要去做学究气的辨析。我曾经提出过一个从工作的两个特性（产…
阅读更多...
2023年金融科技建模大赛（初赛）开箱点评-基于四川新网银行数据集

2023年金融科技建模大赛（初赛）开箱点评-基于四川新网银行数据集

各位同学大家好，我是Toby老师。2023年金融科技建模大赛（初赛）从今年10月14日开始，11月11日结束。 比赛背景 发展数字经济是“十四五”时期的重大战略规划。2023年，中共中央、国务院印发了《数字中国建设整体布局规划》…
阅读更多...
最新文章

Copyright @ 2022~2023