【鸿蒙开发 day12】

news/2024/9/19 0:41:15/ 标签: harmonyos, 华为, 鸿蒙, ui

鸿蒙开发-布局进阶

  • 一.定位
      • 1.绝对定位
      • 2.相对定位
      • 3.定位案例-VIP
  • 二.Z序控制
  • 三.层叠布局
  • 四.bilibili卡片案例
  • 五.list列表容器组件
      • 滚动条状态
      • 列表分割线
  • 六.通用属性
  • 七.动画
  • 八.图形变换
      • 1.平移
      • 2.定位结合平移实现精准定位
      • 3.旋转和缩放
  • 九.总结

一.定位

  • 作用：改变组件位置
    分类：

1.绝对定位

  • position，相对父组件左上角进行偏移
  • 设置百分比,是相对父组件的大小来计算的
  • 绝对定位后的组件不在占用原有位置
    相对定位：offset，相对自身左上角进行偏移
    在这里插入图片描述

2.相对定位

属性：offset()
参数：{x: 水平偏移量, y: 垂直偏移量}
偏移量取值
数字，单位是vp

  • 参照自身原来位置进行偏移
  • 百分比是相当父组件的的尺寸计算结果
  • 不会脱标,占据原来的位置
    在这里插入图片描述

3.定位案例-VIP

@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column() {Column(){Image($r('app.media.moco')).syncLoad(true).borderRadius(10).width('100%')Row(){Image($r('app.media.ic_device_earphone_roc_filled')).height( 30).width(30).backgroundColor('#49bafb').borderRadius(15).padding(5).fillColor('#fff')Text('飞狗MOCO').fontSize(18).fontWeight(700).margin({left:10})}.width('100%').padding({left:10,top:5,bottom:10})//vipText('vip').width(40).height(20).fontWeight(600).fontStyle(FontStyle.Italic).backgroundColor('#e39443').borderRadius({topLeft:10,bottomRight:10}).fontColor('#fff').position({x:0,y:0}).textAlign(TextAlign.Center).border({width:2,color:'rgba(255, 255, 255,0.5)'}).fontSize(14)}.width(200).height(320).shadow({radius:30}).borderRadius(10)}}
}

运行结果:
在这里插入图片描述

二.Z序控制

定位后的组件，默认后定义的组件在最上面显示，可以通过 zIndex 属性调整显示层级
属性：zIndex(数字)
特点：取值为整数数字，取值越大，显示层级越高
在这里插入图片描述

三.层叠布局

  • 布局容器stack

  • 子组件会层叠到一起,越往后的子组件层级越高

  • 改变子组件的层级Zindex(数字),和前面定位使用的方式一致,给子组件设置提高子组件的层级

  • 数字越大,层级越高

  • alignContent:alignment枚举,这个是设置stack中子组件的对齐方式- 默认垂直水平居中

  • 当有两个子组件,其中有一个子组件位置摆放有规律

  • 层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过 Stack 容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。
    层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等。
    在这里插入图片描述

四.bilibili卡片案例

代码实现

@Entry
@Component
struct Index {build() {Column() {Column() {//上Stack({ alignContent: Alignment.TopStart }) {Image($r('app.media.tieyi')).borderRadius({topLeft:10,topRight:10}).width(300)Stack({ alignContent: Alignment.BottomStart }) {Row() {Row({ space: 10 }) {Image($r('app.media.ic_bofangshu')).width(35).fillColor('#fff')Text('282万').fontColor('#fff').fontWeight(600)}.margin({ left: 10, right: 10 })Row({ space: 10 }) {Image($r('app.media.ic_ziyuan')).width(35).fillColor('#fff')Text('8655').fontColor('#fff').fontWeight(600)}.layoutWeight(1)Text('14:33').fontColor('#fff').margin({ right: 10 }).fontWeight(600)}}.width('100%').height('55%')}.width(300)//下面Column(){Text('【凤凰传奇新歌】欢迎来到国风统治区:唢呐一响神曲《铁衣法发顺丰五千人过去').fontSize(20).fontWeight(600).textOverflow({overflow:TextOverflow.Ellipsis}).maxLines(2)Row(){Text('19万点赞').backgroundColor('#ffdbc7').fontColor('#be7a6b').borderRadius(5).padding(5)Image($r('app.media.ic_gengduo')).width(25).fillColor('#ccc')}.margin({top:20,left:10,right:10}).width('100%').justifyContent(FlexAlign.SpaceBetween)}.padding({top:5,left:10,right:10,bottom:20})}.width(300).height(280).backgroundColor('#fff').borderRadius(10).shadow({ radius: 20 })}.width('100%').height('100%')// .backgroundColor('#999').padding(10)}
}

运行结果:
在这里插入图片描述

五.list列表容器组件

  • list组件里面只能放listItem子组件
  • list的子组件间距相同可以用space设置
  • listItem里面只能放一个根组件
  • 滚动效果:当子组件的尺寸大于父组件list的尺寸,默认会出现垂直滚动的效果
  • list组件的主轴默认是垂直方向
  • 可以使用listdirection设置滚动的方向,
  • 里面有个axis枚举,horizontal是水平滚动,vertical是默认的垂直滚动
  • 垂直滚动
@Entry
@Component
struct Index {build() {List(){ListItem(){}.width(300).height(100).backgroundColor(Color.Blue)ListItem(){}.width(300).height(100).backgroundColor(Color.Orange)ListItem(){}.width(300).height(100).backgroundColor(Color.Red)ListItem(){}.width(300).height(100).backgroundColor(Color.Gray)}.width('100%').height(300).backgroundColor(Color.Pink)}
}

水平滚动:我们只需要改变list组件的滚动方向,使用listDirection(axis.Horizontal)

滚动条状态

属性: .scrollBar(BarState.)
参数枚举: BarState

  • on 一直显示
  • off 关闭滚动条
  • auto 显示,两秒后消失

列表分割线

  • 列表默认没有分割线
  • 属性：divider()
  • 参数：{ strokeWidth: 数字， color?: ‘color’, startMargin?: 数字, endMargin?: 数字 }
    在这里插入图片描述

六.通用属性

属性：stateStyles()

  • 如果点击后样式,在点击前里面不具备,那么此样式会复制到点击前样式里面,导致不可恢复原样
  • 通用属性可以在多态样式改变样式
  • 参数 描述
    normal 组件无状态时的样式（默认状态）
    pressed 组件按下状态的样式
    disabled 组件禁用状态的样式
    focused 组件获焦状态的样式
    clicked 组件点击状态的样式
@Entry
@Component
struct Index {build() {Column(){Text('文字').width(100).height(120).backgroundColor(Color.Gray).stateStyles({clicked:{.width(120).height(140).backgroundColor(Color.Pink)}})}}
}

七.动画

  • 动画属性:animation
  • 动画属性只能给通用属性使用
  • 动画属性要写在其他属性后面
  • 支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。
  • duration 设置动画时长。
    默认值：1000
    单位：毫秒
  • curve 设置动画曲线
    默认值：Curve.EaseInOut
  • delay 设置动画延迟执行的时长。
    默认值：0，不延迟播放。
    单位：毫秒
  • iterations 设置播放次数。
    默认值：1
    设置为-1时表示无限次播放。设置为0时表示无动画效果。
  • 代码演示
@Entry
@Component
struct Index {build() {Column(){Text('文字').width(100).height(50).backgroundColor(Color.Orange)//设置通用属性.stateStyles({clicked:{.height(300)}})//设置动画.animation({//设置动画时长duration:1000,//动画速度曲线curve:Curve.Linear,//动画延迟delay:1000,//动画播放次数(-1是无限播放)iterations:1})}}
}

八.图形变换

1.平移

属性:translate

  • 百分比取值相对自身尺寸计算结果
  • 作用：可使组件在以组件左上角为坐标原点的坐标系中进行移动
@Entry
@Component
struct Index {build() {Column() {Text('文字').width(100).height(50).backgroundColor(Color.Orange).translate({ x: 0, y: 0 })//设置通用属性.stateStyles({clicked: {// .translate({x:100,y:100})// .translate({x:'50%',y:0}).translate({ x: 0, y: '50' })}})//设置动画.animation({})}}
}

2.定位结合平移实现精准定位

@Entry
@Component
struct Index {
build() {
Column() {
Text(‘文字’)
.width(‘100%’)
.height(50)
.backgroundColor(Color.Orange)
//将文字区域定位到底部正中心
// .position({x:‘50%’,y:‘100%’})
// .translate({ x:‘-50%’, y:‘-100%’ })//设置通用属性

      //组件宽度100%,设置到底部.position({x:0,y:'100%'}).translate({x:0,y:'-100%'})//设置动画.animation({})
}

}
}
在这里插入图片描述
在这里插入图片描述

3.旋转和缩放

  • 旋转
    属性:rotate()
    参数: {angle:角度}

  • 缩放
    属性scale()
    参数:{x:数字,y:数字}
    数字大于1代表放大,数字小于1代表缩小

@Entry
@Component
struct Index {build() {Column() {Text('文字').width(100).height(100).backgroundColor(Color.Orange)//旋转.rotate({angle:0})//缩放.scale({x:1,y:1})//鼠标点击.stateStyles({clicked:{.rotate({angle:360}).scale({x:1.5,y:1.5})}})//设置动画.animation({})}.width('100%')}
}

九.总结

本章主要还是学习一个常用的布局方式,这些布局方式都有它对应的应用场景,比如列表组件,stack层叠组件,还学习了我们的定位(相对定位和绝对定位),以及在我们使用层序布局和定位产生层叠效果时,为提高组件层级,会使用Zindex控制,也学习了常用的通用属性,图形变换知识点,在我们页面布局中起了很大作用


http://www.ppmy.cn/news/1525935.html

相关文章

机器学习-------数据标准化

机器学习-------数据标准化

什么是归一化，它与标准化的区别是什么？ 一 作用 在做训练时，需要先将特征值与标签标准化，可以防止梯度防炸和过拟合； 将标签标准化后，网络预测出的数据是符合标准正态分布的—StandarScaler()&#xff0c…
阅读更多...
setImmediate() vs setTimeout() 在 JavaScript 中的区别

setImmediate() vs setTimeout() 在 JavaScript 中的区别

setImmediate() vs setTimeout() 在 JavaScript 中的区别 在 JavaScript 中，setImmediate() 和 setTimeout() 都用于调度任务，但它们的工作方式不同。 JavaScript 的异步特性 JavaScript 以其非阻塞、异步行为而闻名，尤其是在 Node.js 环境…
阅读更多...
[000-002-01].第03节：Linux系统下Oracle的安装与使用

[000-002-01].第03节：Linux系统下Oracle的安装与使用

2.1.Docker安装Oracle 在CentOS7中使用Docker安装Oracle： 1.安装Docker,详细请参考：https://blog.csdn.net/weixin_43783284/article/details/1211403682.拉取镜像： docker pull registry.cn-hangzhou.aliyuncs.com/helowin/oracle_11g3.下载…
阅读更多...
用Blender来烘培模型材质

用Blender来烘培模型材质

通常我们在做三维设计，游戏开发的时候，经常需要从网上下载一些3D模型，这些模型采用的材质分辨率通常都不一样，而我们从性能考虑，需要对材质进行统一的处理，例如把材质都统一为2K的分辨率。 我们可以在Blen…
阅读更多...
105页PPT：华为ISC集成供应链变革、模式与方法解析

105页PPT：华为ISC集成供应链变革、模式与方法解析

105页PPT:华为ISC变革、模式与方法PPT,下载链接见文末~ 华为ISC（Integrated Supply Chain，集成供应链）规划管理与变革是华为公司战略转型和提升核心竞争力的关键举措之一。通过多年的努力与实践，华为已经成功构建了一个高效、协同…
阅读更多...
怎么把网站设置成HTTPS访问？

怎么把网站设置成HTTPS访问？

有很多的网站尤其是公司网站都是可以HTTPS访问的，而且在地址栏前面还会显示安全锁，这就是HTTPS证书所起到的作用。没有安装HTTPS证书的网站强制用HTTPS访问会被浏览器提醒不安全。那么我们怎么解决这个问题呢？ 解决办法 一：首先…
阅读更多...
Unity的Button组件进行扩展

Unity的Button组件进行扩展

废话不多说，在Untiy中，如果想要对Button等组件进行扩展的话，那么不仅仅只需要将新增的属性设置为public或者增加SerializeField字段就行了的，同时需要对Inspector的GUI面板进行修改，以下直接展示代码： using UnityEngine; using UnityEngine.EventSystems; using UnityE…
阅读更多...
17、电科院FTU检测标准学习笔记-录波性能

17、电科院FTU检测标准学习笔记-录波性能

作者简介： 本人从事电力系统多年，岗位包含研发，测试，工程等，具有丰富的经验 在配电自动化验收测试以及电科院测试中，本人全程参与，积累了不少现场的经验 ———————————————————…
阅读更多...
Qt 菜单、工具栏 的基本使用

Qt 菜单、工具栏 的基本使用

效果 代码 #include "mainwindow.h" #include "ui_mainwindow.h" #include<QToolBar> #include<QDebug> #include<QPushButton>MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow) {ui->setupU…
阅读更多...
【AcWing】快速排序的Go实现

【AcWing】快速排序的Go实现

快速排序的Go实现 这一部分参考了AcWing当中使用Go语言实现快速排序的题解&#xff1a;https://www.acwing.com/activity/content/code/content/296206/。 其中有很多部分非常值得参考&#xff0c;故写一个博客进行记录。 Code package mainimport "fmt"func qui…
阅读更多...
后端开发刷题 | 矩阵的最小路径和

后端开发刷题 | 矩阵的最小路径和

描述 给定一个 n * m 的矩阵 a&#xff0c;从左上角开始每次只能向右或者向下走&#xff0c;最后到达右下角的位置&#xff0c;路径上所有的数字累加起来就是路径和&#xff0c;输出所有的路径中最小的路径和。 数据范围: 1≤n,m≤500&#xff0c;矩阵中任意值都满足 0≤ai,j…
阅读更多...
基于VUE的在线音乐播放管理系统

基于VUE的在线音乐播放管理系统

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1 、功能描述 基于VUE的在线音乐播放管理系统3是前后端分离项目&#xff0c;拥有两种角色 管理员&#xff1a;用户管理、收藏管理、歌手管理、歌曲管理、歌单管理、评论管理等 用户&#xff1a;登录注…
阅读更多...
DFS 算法：洛谷B3625迷宫寻路

DFS 算法：洛谷B3625迷宫寻路

我的个人主页 {\large \mathsf{{\color{Red} 我的个人主页} } } 我的个人主页 往 {\color{Red} {\Huge 往} } 往 期 {\color{Green} {\Huge 期} } 期 文 {\color{Blue} {\Huge 文} } 文 章 {\color{Orange} {\Huge 章}} 章 DFS 算法&#xff1a;记忆化搜索DFS 算法&#xf…
阅读更多...
rust解说

rust解说

Rust 是一种开源的系统编程语言&#xff0c;由 Mozilla 研究院开发&#xff0c;旨在提供高性能、内存安全且并发性良好的编程体验。 Rust 于 2010 年由 Graydon Hoare 开始设计&#xff0c;并在 2015 年发布了第一个稳定版本。 Rust 的设计目标是解决 C 等传统系统编程语言在…
阅读更多...
Java LinkedList 总结

Java LinkedList 总结

1.特点 LinkedList的内部实现类似于链表&#xff0c;所以使用方法也和链表类似。 2.常用方法 LinkedList list new LinkedList();//创建//插入数据 list.add("jojo");//在尾部插入 list.add(1,"jojo");//在指定位置插入list.addFirst("jojo"…
阅读更多...
Docker：对已有的容器，对当前容器映射的端口实时 (增删改查)

Docker：对已有的容器，对当前容器映射的端口实时 (增删改查)

首先我的docker已经起了一个容器&#xff0c;我突然想把他的80->80映射的端口改成80->8080 但是我不想去新启动容器&#xff0c;想在现有容器基础上去修改&#xff0c;或者我想删除某个端口映射&#xff08;只是大概思路&#xff09; 如何寻找容器配置文件位置 首先我这…
阅读更多...
S3C2440 ARM设备驱动（boot loader，kernel，rootfs）

S3C2440 ARM设备驱动（boot loader，kernel，rootfs）

一、开发板Linux启动需求 1、bootloader 为内核启动准备环境&#xff0c;并引导内核启动 2、kernel&#xff08;linux内核&#xff09; 操作系统的核心&#xff0c;&#xff08;狭义上的操作系统&#xff09; 3、rootfs 一堆有组织的文件 1. bootloader(一个裸机程序) 初始化C…
阅读更多...
LINUX网络编程:http

LINUX网络编程:http

目录 1.认识http请求的字段 2.HTTP请求类 3.认识HTTP应答字段 4.HTTP应答类 5.源代码 协议就是一种约定&#xff0c;http也并不例外&#xff0c;使用http也无非就是&#xff0c;定义一个http请求的结构体&#xff0c;将结构体序列化为字符串&#xff0c;发送给服务器&…
阅读更多...
计算机网络408考研 2022

计算机网络408考研 2022

https://zhuanlan.zhihu.com/p/695446866 1 1 1SDN代表软件定义网络。它是一种网络架构&#xff0c;旨在通过将网络控制平面从数据转发平面分离出来&#xff0c;从而实现网络的灵活性和可编程性。在SDN中&#xff0c;网络管理员可以通过集中式控制器 来动态管理网络流量&…
阅读更多...
Python基础语法(1)上

Python基础语法(1)上

常量和表达式 我们可以把 Python 当成一个计算器&#xff0c;来进行一些算术运算。 print(1 2 - 3) print(1 2 * 3) print(1 2 / 3) 这里我们可能会有疑问&#xff0c;为什么不是1.6666666666666667呢&#xff1f; 其实在编程中&#xff0c;一般没有“四舍五入”这样的规则…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站