ArkTS入门到入土 (4)

最新推荐文章于 2024-07-06 00:15:21 发布
最新推荐文章于 2024-07-06 00:15:21 发布
阅读量884 收藏 12
点赞数 26
文章标签： harmonyos 华为 typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2202_75509211/article/details/139401654
版权

四.布局高级

1. 弹性布局(Flex)

弹性布局（Flex）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。常用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等。

容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸，在交叉轴方向的尺寸称为交叉轴尺寸。

1.1 基本使用

弹性容器组件:Flex()

Flex(参数对象) {
    子组件1
  子组件2
  子组件3
  子组件N
}
build() {
    Flex() {
      Text('1')
        .width('33%')
        .height(30)
        .backgroundColor(Color.Orange)
      Text('2')
        .width('33%')
        .height(30)
        .backgroundColor(Color.Pink)
      Text('3')
        .width('33%')
        .height(30)
        .backgroundColor(Color.Orange)
    }
    .width('100%')
    .height(200)
    .backgroundColor('#ccc')
  }

1.2 布局方向

在弹性布局中，容器的子元素可以按照任意方向排列（默认水平排列）。通过设置参数 direction，可以决定主轴的方向，从而控制子元素的排列方向

参数：direction

值：枚举 FlexDirection

枚举值描述
Row主轴为水平方向
RowReverse相反的水平方向
Colume主轴为垂直方向
ColumnReverse相反的垂直方向
Flex({ direction:FlexDirection.Column }) {
      Text('1')
        .width('33%')
        .height(30)
        .backgroundColor(Color.Orange)
      Text('2')
        .width('33%')
        .height(30)
        .backgroundColor(Color.Pink)
      Text('3')
        .width('33%')
        .height(30)
        .backgroundColor(Color.Orange)
    }
    .width('100%')
    .height(200)
    .backgroundColor('#ccc')

1.3 主轴对齐方式

参数: justifyContent

值：枚举 FlexAlign（属性与线性布局主轴对齐方式相同）

Flex({justifyContent:FlexAlign.SpaceBetween}){
      Text('1')
        .width(30)
        .height(30)
        .backgroundColor(Color.Orange)
      Text('2')
        .width(30)
        .height(30)
        .backgroundColor(Color.Pink)
      Text('3')
        .width(30)
        .height(30)
        .backgroundColor(Color.Orange)
      Text('4')
        .width(30)
        .height(30)
        .backgroundColor(Color.Pink)
    }
    .width('100%')
    .height(100)
    .backgroundColor('#ccc')
  }

1.4 交叉轴对齐方式

参数: alignItems

值:枚举 ItemAlign

build() {
    Flex({direction:FlexDirection.Column,justifyContent:FlexAlign.spaceBetween,alignItems:ItemAlign.Start}) {
      Text('1')
        .width(30)
        .height(30)
        .backgroundColor(Color.Orange)
      Text('2')
        .width(30)
        .height(30)
        .backgroundColor(Color.Pink)
        // 交叉轴拉伸
        .alignSelf(ItemAlign.Stretch)
      Text('3')
        .width(30)
        .height(30)
        .backgroundColor(Color.Orange)
      Text('4')
        .width(30)
        .height(30)
        .backgroundColor(Color.Pink)
​
    }
    .width('100%')
    .height(200)
    .backgroundColor('#ccc')
  }

子元素的 alignSelf 属性也可以设置子元素在父容器交叉轴的对齐格式，且会覆盖 Flex 布局容器中alignItems 配置

1.5 布局换行

弹性布局分为单行布局和多行布局。默认情况下，Flex 容器中的子元素都排在一条线（又称“轴线”）上。子元素尺寸总和大于 Flex 容器尺寸时，子元素尺寸会自动挤压。

wrap 属性控制当子元素主轴尺寸之和大于容器主轴尺寸时，Flex 是单行布局还是多行布局。在多行布局时，通过交叉轴方向，确认新行排列方向。

参数：wrap

值：枚举 FlexWrap

build() {
    Flex({ wrap:FlexWrap.Wrap }) {
      Text('1')
        .width('33%')
        .height(30)
        .backgroundColor(Color.Orange)
      Text('2')
        .width('33%')
        .height(30)
        .backgroundColor(Color.Pink)
      Text('3')
        .width('33%')
        .height(30)
        .backgroundColor(Color.Orange)
      Text('4')
        .width('33%')
        .height(30)
        .backgroundColor(Color.Pink)
​
    }
    .width('100%')
    .height(200)
    .backgroundColor('#ccc')
  }

1.6 自适应拉伸

1.6.1 flexGrow

作用：设置父容器的剩余空间分配给此属性所在组件的比例。用于分配父组件的剩余空间

属性：flexGrow(数字)

参数：数字，占用父级剩余尺寸的份数

Flex() {
        Text('1')
          .width(50)
          .aspectRatio(1)
          .backgroundColor(Color.White)
​
        Text('2')
          .width(50)
          .aspectRatio(1)
          .backgroundColor(Color.Green)
          //占用父空间剩余2份
          .flexGrow(2)
        Text('3')
          .width(50)
          .aspectRatio(1)
          .backgroundColor(Color.Blue)
            //占用父空间剩余1份
          .flexGrow(1)
      }
1.6.2 flexBasis

作用：设置子元素在父容器主轴方向上的基准尺寸。

属性：flexBasis(数字)

参数：数字，基准尺寸（单位vp）。

build() {
    Column() {
      Flex() {
        Text('1')
          .width(50)
          .aspectRatio(1)
          .backgroundColor(Color.White)
​
        Text('2')
          .width(50)
          .aspectRatio(1)
          .backgroundColor(Color.Green)
          .flexGrow(1)
        Text('3')
          .width(50)
          .aspectRatio(1)
          .backgroundColor(Color.Blue)
          .flexBasis(130)
​
      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Gray)

2.1 定位

  • 作用：改变组件位置

    分类：

    • 绝对定位：position，相对父组件左上角进行偏移

    • 相对定位：offset，相对自身左上角进行偏移

2.1 绝对定位

属性：position()

参数：{x: 水平偏移量, y: 垂直偏移量}

偏移量取值

  • 数字，单位是vp

  • 百分比，参照父组件尺寸计算结果

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('文字内容')
        .width(80)
        .height(40)
        .backgroundColor(Color.Pink)
        .position({
          x: 0,
          y: 0
        })
    }
      .width('100%')
      .height(200)
      .backgroundColor('#ccc')
  }
}

绝对定位特点：

  1. 参照父组件左上角进行偏移

  2. 绝对定位后的组件不再占用自身原有位置

2.2 相对定位

属性：offset()

参数：{x: 水平偏移量, y: 垂直偏移量}

偏移量取值

  • 数字，单位是vp

  • 百分比，参照父组件尺寸计算结果

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('内容1')
        .width(80)
        .height(40)
        .backgroundColor(Color.Pink)
      Text('内容2')
        .width(80)
        .height(40)
        .backgroundColor(Color.Orange)
        // 占位
        .offset({
          x: 100,
          y: -30
        })
      Text('内容3')
        .width(80)
        .height(40)
        .backgroundColor(Color.Brown)
    }
    .width('100%')
    .height(200)
    .backgroundColor('#ccc')
  }
}

相对定位特点：

  1. 相对自身左上角进行偏移

  2. 相对定位后的组件仍然占用自身原有位置

2.3 Z序控制

定位后的组件，默认后定义的组件在最上面显示，可以通过 zIndex 属性调整显示层级

属性：zIndex(数字)

特点：取值为整数数字，取值越大，显示层级越高

Column() {
      Text('文字内容1')
        .width(80)
        .height(40)
        .backgroundColor(Color.Pink)
        .position({
          x: 0,
          y: 0
        })
        .zIndex(1)
      Text('文字内容2')
        .width(80)
        .height(40)
        .backgroundColor(Color.Brown)
        .position({
          x: 50,
          y: 0
        })
    }
    .width('100%')
    .height(200)
    .backgroundColor('#ccc')

3.层叠布局

层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过 Stack 容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。

层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等。

3.1 基本使用

Stack 组件为容器组件，容器内可包含各种子元素。其中子元素默认进行居中堆叠。子元素被约束在Stack下，进行自己的样式定义以及排列。

Column(){
      Stack() {
        Column(){}
        .width('90%')
        .height(130)
        .backgroundColor(Color.Gray)
        Text('text')
          .width('60%')
          .height('60%')
          .backgroundColor(Color.Orange)
        Button('button')
          .width('30%')
          .height('30%')
          .backgroundColor('#ff8ff3eb')
          .fontColor('#000')
      }
      .width('100%')
      .height(150)
      .backgroundColor(Color.Pink)
    }
    .margin(10)

3.2 对齐方式

参数：alignContent

取值：枚举 Alignment

 Column() {
      Stack({alignContent:Alignment.Bottom}) {
          //图片下方文字
        Row(){
          //左
          Row(){
            Text('1')
            Text('2')
          }
          //右
          Row(){
            Text('3')
          }
        }
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%')
        .height(50)
        .backgroundColor(Color.Yellow)
      }
      .width('100%')
      .height('100%')
      .backgroundColor(Color.Orange)

    }
    .width('100%')
    .height(200)
    .backgroundColor('#ccc')

3,3 Z序控制

属性：zIndex(数字)

特点：取值为整数数字，取值越大，显示层级越高

Column(){
      Stack({ alignContent: Alignment.BottomEnd }) {
        Column(){}
        .width('90%')
        .height(130)
        .backgroundColor(Color.Gray)
        Text('text')
          .width('60%')
          .height('60%')
          .backgroundColor('rgba(0,0,0,0.3)')
          // Z 序：显示在按钮上一层
          .zIndex(1)
        Button('button')
          .width('30%')
          .height('30%')
          .backgroundColor('#ff8ff3eb')
          .fontColor('#000')
      }
      .width('100%')
      .height(150)
      .backgroundColor(Color.Pink)
    }
    .margin(10)

空白填充组件 Blank()

megaSong
关注
  • 26
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
java入门到入土.md
02-20
java入门到入土.md
python从入门到入土练习习题
05-30
Python是一种高级的、面向对象的编程语言，以其简洁的语法和强大的功能深受程序员喜爱。它可在多种平台上运行，包括Windows、Linux、Mac OS等，这体现了其高度的可移植性。Python模块是组织代码的一种方式，本质是....
ArkTs入门到入土
2202_75509211的博客
05-30 1479
随着鸿蒙遥遥领先的发布，更多人看好鸿蒙的发展方向，这篇文章就把我学到的鸿蒙从入门到进阶进行整理，慢慢更新
基础ArkTS组件：数据面板组件（图表），日期选择器组件（HarmonyOS学习第三课【3.5】）
qq_58213084的博客
05-08 967
数据面板组件，用于将多个数据占比情况使用占比图进行展示。说明该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
ArkTs的入门到入土 （2）
2202_75509211的博客
05-31 477
ArkTS-语句-类型进阶与渲染控制
ArkTS的入门到入土 （3）
2202_75509211的博客
06-01 822
ArtTs的入门到进阶，从小白到鸿蒙大神的快速进阶！！！
ArkTS的入门到入土（5）
2202_75509211的博客
06-04 458
24年程序员的曙光？快来和我一起从入门到入土
java从入门到入土第一卷
11-08
没事复习一遍
Spring从入门到入土——快速上手Spring
12-21
快速入门HelloSpring编写代码编写一个Hello实体类编写Spring文件，命名为beans.xml测试结果以及...Spring从入门到入土——概述以及IOC理论推导 Spring从入门到入土——快速上手Spring HelloSpring ​ 我们要想使用Sprin
高级C语言从入门到入土小部分资料
08-30
高级C语言从入门到入土小部分资料
VSCode设置好看清晰的字体！中文用鸿蒙，英文用Jetbrains Mono
最新发布
ly_twt的博客
07-06 392
然后将里面的HarmonyOS_Sans_SC_Regular.ttf直接拖进设置 --> 个性化 --> 字体安装即可。（2）然后选择里面的HarmonyOS_Sans_SC_Regular.ttf，右键“为所有用户安装”即可安装。2、下载后开始安装字体（同上安装中文字体一样，也有两种方式，这里用方法1安装英文字体）（1）将下载的压缩包解压，然后简体中文就选择HarmonyOS_Sans_SC打开。（2）将下载的压缩包解压，然后简体中文就选择HarmonyOS_Sans_SC打开。（2）找到字体设置处。
鸿蒙NEXT
2301_81771576的博客
06-29 1596
据了解，除了已经公开亮相华为开发者大会的腾讯视频、腾讯新闻、QQ 浏览器、搜狗输入法、腾讯自选股、QQ音乐、酷狗音乐、酷我音乐、全民K歌、懒人听书、起点读书外，腾讯旗下多款产品已在进行鸿蒙系统的开发适配工作，希望尽快保障用户平滑、安全、稳定地过渡到新系统。其次就是，鸿蒙NEXT针对一些基础、高频、创新的场景， 通过 API、控件等方式向第三方应用开放如实时朗读、智能荐图、自动填写、图文翻译、OCR 服务识别推荐、主体抠图、人脸检测、卡证识别等能力，和开发者共同打造生态级的鸿蒙原生智能。
鸿蒙系统的前世今生
jinyuttt的专栏
06-28 572
不仅如此，大会上华为还发布了盘古大模型5.0、全新鸿蒙原生智能框架等，这些创新技术的出现也标志着操作系统(OS)将与AI深度融合，国内一个全新的AI时代即将来临。前华为开发者大会上，HarmonyOS NEXT（原生鸿蒙）正式公布，且不依赖传统的Unix内核和Linux内核只靠自主的鸿蒙内核这点，意味着华为终于拥有自身的“纯血鸿蒙”，该系统商用也即将进入冲刺阶段，预计四季度走向普通消费者市场。理解鸿蒙对于华为的意义，既要立足于华为本身，也要站在时代的台阶上。目前大家称之为：纯血鸿蒙。
HarmonyOS APP应用开发项目- MCA助手（Day02持续更新中~）
Varin
06-30 752
鸿蒙APP开发是指在华为的HarmonyOS平台上构建应用程序的过程，它利用华为提供的DevEco Studio集成开发环境（IDE）以及一套丰富的API库，支持Java、JavaScript等语言，采用组件化和模块化设计原则。开发者可以通过创建Ability和Particle组件，构建具有分布式能力的应用，实现一次开发，多端部署的目标，让应用能够在手机、平板、穿戴设备、智能家电等不同设备之间无缝流转，提供统一的用户体验和强大的跨设备协同能力。鸿蒙APP开发旨在简化开发流程，降低开发成本，同时增强应用的安全
融云上线 HarmonyOS NEXT 版 SDK，全面适配「纯血鸿蒙」生态
weixin_44764152的博客
07-02 622
6 月 21 日，“2024 华为开发者大会”正式发布使用自研内核的原生鸿蒙系统 HarmonyOS NEXT，即 “纯血鸿蒙”。同时，华为宣布开放“鸿蒙生态伙伴 SDK 市场”，甄选各类优质、安全的 SDK 加入聚合平台，助力各行业开发者轻松、高效地打造鸿蒙原生应用。融云率先完成针对“纯血鸿蒙”操作系统的 SDK 研发，HarmonyOS NEXT 版融云 IM SDK 已上线，开发者可在“鸿蒙生态伙伴 SDK 市场”查询使用；RTC SDK 也正在紧锣密鼓推进中，近期即将上线，请大家持续关注。
ShareSDK HarmonyOS NEXT集成指南
apkkkk的博客
07-02 512
使用MobSDK之前，需要先在MobTech官网注册开发者账号，并获取MobTech提供的AppKey和AppSecret，详情可以。至此，ShareSDK已经集成完毕且已实现最基础的分享和授权功能，可以参考其他文档继续使用ShareSDK的其他功能。如果应用需要使用用户的手机号或其他更为精细化的配置，可参考华为官方文档进行配置。如您需要使用华为授权，则需要配置client_id才可正常使用授权功能。移除授权状态和本地缓存，下次授权会重新授权获取新的授权信息。调用以下代码，可快速实现分享功能。
bmob Harmony鸿蒙快速开发搜索功能
m0_74037076的博客
07-02 383
搜索功能是很多应用都需要的功能。在很多平台上，要开发一个兼容性较好的搜索功能都还是需要添加比较多的视图代码的。为了解决这个问题，鸿蒙ArkUI提供了一个快速添加搜索功能的视图组件给我们，结合Bmob Harmony鸿蒙SDK的搜索能力，我们可以在非常短的时间内，给应用添加搜索功能。这就是本文给大家带来的案例，界面效果如下：如果一切顺利，你会在当前项目下的oh_modules目录下看到@bmob/bmob。
java学习怎么从入门到入土
03-31
作为一个 AI，我不能协助您在学习过程中“入土”，因为我的宗旨是帮助人们更好地学习和成长。以下是一些建议，可以帮助您更好地学习 Java。 1. 学习基础：首先，您需要了解 Java 的基础知识，例如变量、数据类型、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值