鸿蒙开发之ArkUI 界面篇 十九 Flex组件的特点

其语法格式是:

Flex(参数对象){

字组件1,

字组件2,

字组件3,

字组件4

}

这里你会发现,其实和Row容器,Colum容器的语法格式差不多,核心的关键是Colum、Row是不支持换行,实现FlexInterface接口,对外提供的属性是FlexOptions提供的,方向是FlexDirection的值提供,默认是从左往右,主轴对其方式仍然是justifyContent,交叉轴对其方式alignItems,换行wrap。核心代码如下,如果需求变,适当调整就行

 实现下面效果:

垂直方向,外层容器是Colum,上面是Text,下面是Flex+Text,代码如下:

@Entry
@Component
struct Index {build() {Column(){Text('学习选择').fontSize(30).fontWeight(777).padding(15).width('100%')Flex({// direction:FlexDirection.Row,// justifyContent:FlexAlign.Start,//主轴方向// alignItems:ItemAlign.Center,  //交叉轴方向wrap:FlexWrap.Wrap}){Text('ArKUI').fontSize(25).padding(15).backgroundColor('#f1f1f1').margin(5)Text('ArKTS').fontSize(25).padding(15).backgroundColor('#f1f1f1').margin(5)Text('界面开发').fontSize(25).padding(15).backgroundColor('#f1f1f1').margin(5)Text('系统能力').fontSize(25).padding(15).backgroundColor('#f1f1f1').margin(5)Text('权限控制').fontSize(25).padding(15).backgroundColor('#f1f1f1').margin(5)Text('元服务').fontSize(25).padding(15).backgroundColor('#f1f1f1').margin(5)}.width('100%')}
}
}总结:Flex组件的特点是可以换行,也可以指定方向,垂直方向或者是水平方向,默认是水平方向,指定方向是FlexDirection,对其方式也分为主轴对其和交叉轴对其方式,也可以指定还不换行,不换行的效果就是垂直布局或者是线性布局

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据库(MySQL):使用命令从零开始在Navicat创建一个数据库及其数据表(二).设置主键自增等特点

前言 在上一节中,主要介绍了 Navicat Premium 17 的使用以及创建一个基础的表格。当时只设置了给数据表补充字段,没有设置给数据表删除字段。现在补充一下。 ALTER TABLE student ADD test int(4); 给名为 student 的数据表添加 test 列&#xf…

Android OTA升级

针对Android系统OTA升级,MTK平台有相关介绍文档:https://online.mediatek.com/apps/faq/detail?faqidFAQ27117&listSW 概念一:OTA包的构建 AOSP full build:Android原生提供的全量包的构建,意思就是可以从任何一…

数据结构:AVL树

前言 学习了普通二叉树,发现普通二叉树作用不大,于是我们学习了搜索二叉树,给二叉树新增了搜索、排序、去重等特性, 但是,在极端情况下搜索二叉树会退化成单边树,搜索的时间复杂度达到了O(N),这…

【EXCEL数据处理】000020 案例 保姆级教程,附多个操作案例。EXCEL使用表格。

前言:哈喽,大家好,今天给大家分享一篇文章!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏关注哦 💕 目录 【EXCEL数据处理】000020 案例 保姆级教程,附多个操作案例。…

vulnhub-digitalworld.local DEVELOPMENT靶机

vulnhub:digitalworld.local: DEVELOPMENT ~ VulnHub 导入靶机,放在kali同网段,扫描 靶机在192.168.114.129,扫描端口 开了几个端口,8080端口有网页,访问 说是让访问html_pages 似乎把页面都写出来了&…

2-115 基于matlab的瞬态提取变换(TET)时频分析

基于matlab的瞬态提取变换(TET)时频分析,瞬态提取变换是一种比较新的TFA方法。该方法的分辨率较高,能够较好地提取出故障的瞬态特征,用于故障诊断领域。通过对原始振动信号设置不同信噪比噪声,对该方法的抗…

面向对象特性中 继承详解

目录 概念: 定义: 定义格式 继承关系和访问限定符 基类和派生类对象赋值转换: 继承中的作用域: 派生类的默认成员函数 继承与友元: 继承与静态成员: 复杂的菱形继承及菱形虚拟继承: 虚…

学MybatisPlus

1.设置MySql的数据库 spring:datasource:url: jdbc:mysql://127.0.0.1:3306/mp?useUnicodetrue&characterEncodingUTF-8&autoReconnecttrue&serverTimezoneAsia/Shanghaidriver-class-name: com.mysql.cj.jdbc.Driverusername: rootpassword: MySQL123 logging:l…

IDEA搭建JDK1.8源码调试环境

大家好 下载源码 安装好 JDK 后,源码目录下面有 src.zip 文件,这个文件就是 JDK 的源码 搭建调试环境 新建 Maven 工程,包含以下文件 source:源码文件夹(手动新建)test:单元测试文件夹&…

Linux文件重定向文件缓冲区

目录 一、C文件接口 二、系统文件I/O 2.1认识系统文件I/O 2.2系统文件I/O 2.3系统调用和库函数 2.4open( )的返回值--文件描述符 2.5访问文件的本质 三、文件重定向 3.1认识文件重定向 3.2文件重定向的本质 3.3在shell中添加重定向功能 3.4stdout和stderr 3.5如何理…

JS测试框架——Jest

文章目录 安装yarn安装jestvscode支持jest的智能提示创建JS测试用例 安装yarn yarn是meta发布的一款取代npm的包管理工具。 npm install -g yarn查看yarn软件源 yarn config get registry换源 yarn config set registry https://registry.npmmirror.com恢复官方源 yarn co…

中广核CGN25届校招网申SHL测评题库、面试流程、招聘对象,内附人才测评认知能力真题

​中国广核集团校园招聘在线测评攻略🚀 🎓 校园招聘对象 2024届、2025届海内外全日制应届毕业生,大专、本科、硕士、博士,广核集团等你来! 📈 招聘流程 投递简历 简历筛选 在线测评(重点来啦…

个人项目简单https服务配置

1.SSL简介 SSL证书是一种数字证书,由受信任的证书颁发机构(CA)颁发,用于在互联网通信中建立加密链接。SSL代表“安全套接层”,是用于在互联网上创建加密链接的协议。SSL证书的主要目的是确保数据传输的安全性和隐私性…

看Threejs好玩示例,学习创新与技术(LiquidRaymarching)

今天的示例有点超出我的想象,首先会科普下WGSL这种新的着色器脚本,然后说说示例《Liquid Raymarching Scene with Three.js Shading Language | Codrops (tympanus.net)》的技术流程。本示例最终呈现的效果如下。可以看到他跟QQ那个消息拖拽消灭的效果非…

基于STM32的数字温度传感器设计与实现

引言 STM32 是由意法半导体(STMicroelectronics)开发的基于 ARM Cortex-M 内核的微控制器系列,以其强大的处理能力、丰富的外设接口和低功耗著称,广泛应用于嵌入式系统设计中。在这篇文章中,我们将介绍如何基于 STM32…

考研论坛平台|考研论坛小程序系统|基于java和微信小程序的考研论坛平台小程序设计与实现(源码+数据库+文档)

考研论坛平台小程序 目录 基于java和微信小程序的考研论坛平台小程序设计与实现 一、前言 二、系统功能设计 三、系统实现 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取: 博主介绍:✌️大厂…

联想电脑怎么开启vt_联想电脑开启vt虚拟化教程(附intel和amd主板开启方法)

最近使用联想电脑的小伙伴们问我,联想电脑怎么开启vt虚拟。大多数可以在Bios中开启vt虚拟化技术,当CPU支持VT-x虚拟化技术,有些电脑会自动开启VT-x虚拟化技术功能。而大部分的电脑则需要在Bios Setup界面中,手动进行设置&#xff…

【Android】Handler消息机制

文章目录 前言概述核心组件概述Android消息机制概述 Android消息机制分析ThreadLocal的工作原理ThreadLocal基础ThreadLocal实现原理 MessageQueueLooperHandler的工作原理总结 前言 本文用于记录Android的消息机制,主要是指Handler的运行机制。部分内容参考自《An…

数据库管理-第248期 23ai:全球分布式数据库-分片数据分布方法(20241006)

数据库管理248期 2024-10-06 数据库管理-第248期 23ai:全球分布式数据库-分片数据分布方法(20241006)1 系统管理分片2 用户定义分片2.1 分片空间2.2 在用户定义分片配置中添加分片空间2.3 为用户定义分片创建表空间2.4 用户定义分片创建分片表…

使用bert模型进行命名实体识别任务

一、实验内容 本实验使用预训练的 BERT 模型进行命名实体识别(NER)任务,并且使用 Hugging Face 的 Transformers 库完成模型的训练、验证和测试。最后,使用测试集评估模型性能,计算NER指标。 二、算法介绍 Bert是一种…