HarmonyOS Next星河版笔记--界面开发(4)

布局

1.1.线性布局

线性布局通过线性容器column和row创建

  • column容器:子元素垂直方向排列
  • row容器:子元素水平方向排列

1.1.1.排布主方向上的对齐方式(主轴)

属性:.justifyContent(枚举FlexAlign)(Row组件的justifyContent属性效果相似)

居顶

.justifyContent(FlexAlign.Start)

居中

.justifyContent(FlexAlign.Center)

居底

.justifyContent(FlexAlign.End)

其他

@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column() {Text().width(200).height(100).backgroundColor(Color.Pink).border({width : 2})Text().width(200).height(100).backgroundColor(Color.Pink).border({width : 2}).margin(20)Text().width(200).height(100).backgroundColor(Color.Pink).border({width : 2})}.width('100%').height('100%')//设置排布主方向的对齐方式(主轴)//justifyContent(枚举FlexAlign)   ctrl+p   cmd+p//1、Start      (排布主方向) 主轴起始位置对齐//2、Center      主轴居中对齐//3、End         主轴结束位置对齐//4、SpaceBetween   贴边显示,中间的元素均匀分布间隙//5、SpaceAround    间隙环绕   0.5 1  1  1  0.5的间隙分布,靠边只有一半的间隙//6、SpaceEvenly    间隙均匀环绕,靠边也是完整的一份间隙.justifyContent(FlexAlign.SpaceEvenly)}
}

1.1.2.交叉轴对齐方式

属性:alignItems()

参数:枚举类型

  • 交叉轴在水平方向:HorizontalAlign
  • 交叉轴在垂直方向:VerticalAlign

@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {//Column  交叉轴的对齐方式(水平往右)//alignItems(HorizontalAlign.Start)     Center   End//.alignItems(VerticalAlign.Top)    Center        Bottom//Column() {Row(){Text().width(50).height(100).backgroundColor(Color.Pink).border({width : 2})Text().width(50).height(100).backgroundColor(Color.Pink).border({width : 2}).margin({// top:20,// bottom:20left:20,right:20})Text().width(50).height(100).backgroundColor(Color.Pink).border({width : 2})}.width('100%').height('100%')
.alignItems(VerticalAlign.Bottom)}
}

1.2.弹性布局

弹性容器组件:Flex()

基本使用

Flex(参数对象){子组件1子组件2子组件3子组件N}

wrap属性:Flex是单行布局还是多行布局

        1、FlexWrap.NoWrap(单行布局)

        2、FlexWrap.Wrap(多行布局)

@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {//flex默认主轴水平往右,交叉轴垂直往下 → row/column//2、主轴对齐方式//3、交叉轴对齐方式//单行或单列的情况,优先还是使用线性布局//Flex布局:伸缩布局。当子盒子的总和溢出父盒子,默认进行压缩显示。//4、换行 wrapFlex({// direction:FlexDirection.Row,// justifyContent:FlexAlign.SpaceAround,// alignItems:ItemAlign.Center
wrap:FlexWrap.Wrap}){Text().width(80).height(80).backgroundColor(Color.Pink).border({width:1,color:Color.Green})Text().width(80).height(80).backgroundColor(Color.Pink).border({width:1,color:Color.Green})Text().width(80).height(80).backgroundColor(Color.Pink).border({width:1,color:Color.Green})Text().width(80).height(80).backgroundColor(Color.Pink).border({width:1,color:Color.Green})}.width(300).height(600).backgroundColor(Color.Blue)}
}

案例

@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {
Column(){Text('阶段选择').fontSize(36).fontWeight(700).width('100%').padding(15)Flex({wrap:FlexWrap.Wrap}){Text('ArkUI').padding(15)Text('ArkTS').padding(15)Text('界面开发').padding(15)Text('系统能力').padding(15)Text('权限控制').padding(15)Text('元服务').padding(15)}
}}}

运行效果

1.3.综合案例(列表项)

@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column(){Row({space:8}){Column(){Text("玩一玩").fontSize(FontWeight.Bolder)Text('签到有礼|超多tomato 超好吃').fontColor(Color.Gray)}.alignItems(HorizontalAlign.Start)Column(){Image($r('app.media.tomato')).width(40).backgroundColor('#efefef').borderRadius(5)}.alignItems(HorizontalAlign.Center)}.width('90%').height(80).backgroundColor('#fff').borderRadius(10).justifyContent(FlexAlign.SpaceBetween).padding({left:15,right:15}).margin({top:20})}.width("100%").height("100%").backgroundColor(Color.Yellow)}}

1.4.自适应伸缩

设置layoutWeight属性的子元素与兄弟元素,会按照权重进行分配主轴的空间

语法:.layoutWeight(数字)

作用:左边自适应;右边固定

@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column(){Row() {Text('左边').layoutWeight(1).height(50).backgroundColor(Color.Pink)Text('右边').width(70).height(50).backgroundColor(Color.Orange)}}.width("100%").height("100%").backgroundColor(Color.Yellow)}}

效果

1.5.综合案例(卡片)

案例

@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column() {Column(){
Image($r('app.media.xinlan')).width('100%').borderRadius({topRight:10,topLeft:10})Text('今晚必看 | 每日艺术分享NO.1').fontSize(15).fontWeight(30).padding({left:5,right:5}).lineHeight(22).height(60)//底部Row(){//头像、昵称Row({space:5}){Image($r('app.media.potato')).width(25).borderRadius(100)Text('7373').fontSize(10).fontColor('#999')}.layoutWeight(1)//点赞图标点赞数Row({space:5}){Image($r('app.media.thumbgood')).width(13).fillColor('#999')Text('2.3W').fontSize(13).fontColor('#666')}}.padding({left:15,right:15})}.width(200)//.height(400)//先定死一个高,后续内容撑开.padding({bottom:15}).backgroundColor(Color.White).borderRadius({topLeft:10,topRight:10})}.padding(10).width('100%').height('100%').backgroundColor('#ccc')}
}

1.6.阶段性综合案例

京东页面登录案例

分析:

  1. 布局容器 + 顶部 +logo
    1. 布局背景:backgroundImage
    2. 布局容器:整体从上往下 —— Column
    3. 顶部:左右布局——Row、SpaceBetween
    4. logo:Image图片
  2. 输入框和登录区域
    1. 国家地址:点按区域(Row→Text、Text、Image)
    2. 手机号:输入框TextInput
    3. 同意许可:复选框checkbox,文本Text→Span
    4. 登录按钮、用户注册
  3. 底部模块区域
    1. 整体Column列
    2. 标题Text
    3. 三方登录图标:Row、Image、spacearound
    4. 底部居底:Blank()填充组件

1.7.绝对定位和层级zIndex

1.7.1.绝对定位

作用:控制组件位置,可实现层叠效果

特点:

  1. 参照父组件左上角 进行偏移
  2. 绝对定位后的组件 不占用自身原有位置

语法:.position(位置对象)

参数:{ x : 水平偏移位置 , y : 垂直偏移位置 }

Text('文字内容')
.position({x : 50 ,y : 50 })
@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {//position绝对定位:可以控制组件位置,可以实现层叠效果//语法:// .position({//   x:150,//   y:50// })//特点://1、相对应父组件左顶点进行偏移(调整位置)//2、原本的位置不占了,且可以任意调整位置,不影响其他元素//后面的组件明显层级更高,会盖住前面的组件//需求:不动结构的情况下,调整组件的层级   .zIndex(数字)Column(){Text('大儿子').width(80).height(80).backgroundColor(Color.Gray)Text('二儿子定位').width(80).height(80).backgroundColor(Color.Yellow).position({x:150,y:50}).zIndex(1)Text('三儿子').width(80).height(80).backgroundColor(Color.Green).zIndex(2)}.width(300).height(300).backgroundColor(Color.Pink)}

1.8.层叠布局

层叠布局具有较强的组件层叠能力。场景:卡片层叠效果

特点层叠操作更简洁,代码效率更高(绝对定位的优势是灵活)

Stack  容器内的子元素的顺序为Item1 -> Item2 -> Item3

Stack(){Item1()Item2()Item3()
}

语法

  Stack({alignContent:Alignment.Top}){Item1()Item2()Item3()
}

案例

@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {
//层叠布局Stack({alignContent:Alignment.TopStart}){Text('大儿子').width(250).height(250).backgroundColor(Color.Green)Text('二儿子').width(150).height(150).backgroundColor(Color.Orange)Text('三儿子').width(50).height(50).backgroundColor(Color.Yellow)}.width(300).height(600).backgroundColor(Color.Pink)}}

运行效果

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

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

相关文章

webpack loader全解析,从入门到精通(10)

webpack 的核心功能是分析出各种模块的依赖关系,然后形成资源列表,最终打包生成到指定的文件中。更多复杂的功能需要借助 webpack loaders 和 plugins 来完成。 1. 什么是 Loader Loader 本质上是一个函数,它的作用是将某个源码字符串转换成…

如何用WordPress和Shopify提升SEO表现?

选择合适的建站程序对于SEO优化非常重要。目前,WordPress和Shopify是两种备受推崇的建站平台,各有优势。 WordPress最大的优点是灵活性。它支持大量SEO插件,帮助你调整元标签、生成站点地图、优化内容结构等。这些功能让你能够轻松地提升网站…

ArcGIS Pro属性表乱码与字段名3个汉字解决方案大总结

01 背景 我们之前在使用ArcGIS出现导出Excel中文乱码及shp添加字段3个字被截断的情况,我们有以下应对策略: 推荐阅读:ArcGIS导出Excel中文乱码及shp添加字段3个字被截断? 那如果我们使用ArGIS Pro出现上述问题,该如何…

24/11/13 算法笔记<强化学习> DQN算法

DQN算法的主要特点包括: 神经网络代替Q表:在传统的Q学习中,需要维护一个Q表来存储每个状态-动作对的Q值。而在DQN中,使用神经网络来近似这些Q值,这使得算法能够处理具有大量状态和动作的问题。 经验回放(E…

Blender进阶:图像纹理节点和映射节点

13 图像纹理节点 13.1 图像纹理节点 图像纹理节点,用于加载一张贴图 加载图片后,可以从图片上取得一个像素点。 输入:一个坐标矢量 输出:该坐标的像素颜色 演示:使用合并xyz节点来指定坐标。。 13.2 多种贴图 一…

MYSQL 库,表 基本操作

相关的两个编码集(简单了解即可) 1.数据库编码集 :对将要存储的数据进行编码 2.数据库校验集:对将要执行的操作(增删查改)数据是对数据编码的校验,本质也是一种读取数据库中数据库采用的一种编码格式。 总结:数据库无论对数据做…

万字长文分析函数式编程

目录 一.认识函数式编程 一、函数式编程的定义 二、函数式编程的思想 三、函数式编程的特点 四、函数式编程的应用 二.Lambda表达式 三.Stream流 3.1 创建流对象 3.2 注意事项 3.3 Stream流的中间操作 filter map distinct sorted limit skip flatMap 3.4 St…

DOM 规范 — MutationObserver 接口

前言 最近在重学 JavaScript 中,再一次接触到了 MutationObserver 内容,接着联想到了 Vue 源码中有使用过这个接口,因此觉得有必要对 MutationObserver 接口进行相关了解和学习。 下面是 vue 源码中关于 MutationObserver 接口使用的代码&a…

灰狼优化算法

一、简介 1.1 灰狼优化算法-Grey Wolf Optimizer 通过模拟灰狼群体捕食行为,基于狼群群体协 作的机制来达到优化的目的。GWO算法具有结构简单、需 要调节的参数少、容易实现等特点,其中存在能够自适应调整 的收敛因子…

AI 写作(五)核心技术之文本摘要:分类与应用(5/10)

一、文本摘要:AI 写作的关键技术 文本摘要在 AI 写作中扮演着至关重要的角色。在当今信息爆炸的时代,人们每天都被大量的文本信息所包围,如何快速有效地获取关键信息成为了一个迫切的需求。文本摘要技术正是为了解决这个问题而诞生的&#x…

【 ElementUI 组件Steps 步骤条使用新手详细教程】

本文介绍如何使用 ElementUI 组件库中的步骤条组件完成分步表单设计。 效果图: 基础用法​ 简单的步骤条。 设置 active 属性,接受一个 Number,表明步骤的 index,从 0 开始。 需要定宽的步骤条时,设置 space 属性即…

尽量通俗易懂地概述.Net U nity跨语言/跨平台相关知识

本文参考来自唐老狮,Unity3D高级编程:主程手记,ai等途径 仅作学习笔记交流分享 目录 1. .Net是什么? 2. .Net框架的核心要点? 跨语言和跨平台 .Net x Unity跨平台发展史 Net Framework 2002 Unity跨平台之 Mono 2004 Unity跨平台之 IL2CPP 2015 二者区别 .NET Core …

基于yolov8、yolov5的番茄成熟度检测识别系统(含UI界面、训练好的模型、Python代码、数据集)

摘要:番茄成熟度检测在农业生产及质量控制中起着至关重要的作用,不仅能帮助农民及时采摘成熟的番茄,还为自动化农业监测提供了可靠的数据支撑。本文介绍了一款基于YOLOv8、YOLOv5等深度学习框架的番茄成熟度检测模型,该模型使用了…

应用程序部署(IIS的相关使用,sql server的相关使用)

数据服务程序(API)部署 1、修改配置文件 打开部署包中的web.config配置文件,确认数据库登录名和密码正确 修改ip为电脑IP(winR输入cmd,输入ipconfig,IPv4对应的就是本机IP) 2、打开IIS&#x…

网页版五子棋——对战模块(服务器端开发②)

前一篇文章:网页版五子棋——对战模块(服务器端开发①)-CSDN博客 项目源代码:Java: 利用Java解题与实现部分功能及小项目的代码集合 - Gitee.com 目录 前言 一、创建并注册 GameAPI 类 1.创建 GameAPI 类 2.注册 GameAPI 类 …

STM32单片机WIFI语音识别智能衣柜除湿消毒照明

实践制作DIY- GC0196-WIFI语音识别智能衣柜 一、功能说明: 基于STM32单片机设计-WIFI语音识别智能衣柜 二、功能介绍: STM32F103C系列最小系统板LCD1602显示器ULN2003控制的步进电机(柜门开关)5V加热片直流风扇紫外消毒灯DHT11…

网络远程操控

1.给两个设备配上ip地址让他们能通 2.开启远程管理功能,打开telnet 3.创建远程管理的账号和密码,账号权限 输入system-view进入视图,不敲这个命令不能进行配置 配好ip后进入AR1ping一下AR2的ip看看通不通,接着进入AR2开启telnet权…

【go从零单排】Timer、Epoch 时间函数

🌈Don’t worry , just coding! 内耗与overthinking只会削弱你的精力,虚度你的光阴,每天迈出一小步,回头时发现已经走了很远。 📗概念 在 Go 语言中,time.Timer 是一个用于在指定时间后执行操作的计时器。…

鸿蒙自定义UI组件导出使用

上期讲解了在Entry入口写了一个系统的下拉列表组件,如果我们想要封装一个可供复用的组件供团队其他人使用,那么需要掌握一下自定义组件的写法: 1、自定义可导入组件 - export 声明模块 如果要定义一个在外部可使用的组件 , 需要再定义组件…

Web大学生网页作业成品——婚礼婚纱网页设计与实现(HTML+CSS)(6个页面)

🎉🎉🎉 常见网页设计作业题材有**汽车、环保、明星、文化、国家、抗疫、景点、人物、体育、植物、公益、图书、节日、游戏、商城、旅游、家乡、学校、电影、动漫、非遗、动物、个人、企业、美食、婚纱、其他**等网页设计题目, 可满足大学生网…