Harmony OS开发之ArkUI框架速成九弹性布局和层叠布局

已于 2025-01-07 23:47:09 修改
阅读量476 收藏 6
点赞数 12
分类专栏： 我的Harmony OS开发之路 文章标签： vue.js
于 2025-01-07 23:44:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xingfei_work/article/details/144996040
版权

> 程序员Feri一名12年+的程序员,做过开发带过团队创过业,擅长Java相关开发、鸿蒙开发、人工智能等,专注于程序员搞钱那点儿事,希望在搞钱的路上有你相伴！君志所向,一往无前！

---

1.弹性布局（Flex）

弹性布局分为单行布局和多行布局。

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

wrap 属性控制当子元素主轴尺寸之和大于容器主轴尺寸时，Flex 是单行布局还是多行布局。

在多行布局时，通过交叉轴方向，确认新行排列方向。

参数：wrap

值：枚举 FlexWrap

示例代码：

@Entry
@Component
struct Index3{
  build() {
    Flex({wrap:FlexWrap.Wrap}) {
      Text()
        .width(80)
        .height(40)
        .backgroundColor(Color.Pink)
        .margin(5)
      Text()
        .width(80)
        .height(40)
        .backgroundColor(Color.Orange)
        .margin(5)
      Text()
        .width(80)
        .height(40)
        .backgroundColor(Color.Pink)
        .margin(5)
      Text()
        .width(80)
        .height(40)
        .backgroundColor(Color.Orange)
        .margin(5)
      Text()
        .width(80)
        .height(40)
        .backgroundColor(Color.Pink)
        .margin(5)
      Text()
        .width(80)
        .height(40)
        .backgroundColor(Color.Orange)
        .margin(5)
    }
    .width('100%')
    .height(200)
    .backgroundColor('#ccc')
  }
}

效果如下图所示：

2.综合实实践-商品列表

@Entry
@Component
struct Index{
  build() {


    Column() {
      Flex({ wrap: FlexWrap.Wrap }) {
        Column({ space: 8 }) {
          Image($r('app.media.xw'))
            .width('100%')
            .borderRadius({topLeft: 5, topRight: 5})
          Text('[ 程序员必备 ] 最高版本-格子衫')
            .fontSize(12)
            .maxLines(1)
            .textOverflow({overflow: TextOverflow.Ellipsis})
            .padding({left: 10, right: 10})
          Text() {
            Span('￥666 ')
              .fontSize(12)
              .fontColor('#f52555')
            Span('销量666')
              .fontSize(8)
              .fontColor('#999')
          }
          .padding({left: 10, right: 10})
        }
        .width('47%')
        .backgroundColor('#fff')
        .margin({right: 10, bottom: 10})
        .borderRadius(5)
        .alignItems(HorizontalAlign.Start)
        .padding({bottom: 10})
        Column({ space: 8 }) {
          Image($r('app.media.xw'))
            .width('100%')
            .borderRadius({topLeft: 5, topRight: 5})
          Text('[ 程序员必备 ] 最高版本-格子衫')
            .fontSize(12)
            .maxLines(1)
            .textOverflow({overflow: TextOverflow.Ellipsis})
            .padding({left: 10, right: 10})
          Text() {
            Span('￥888 ')
              .fontSize(12)
              .fontColor('#f52555')
            Span('销量888')
              .fontSize(8)
              .fontColor('#999')
          }
          .padding({left: 10, right: 10})
        }
        .width('47%')
        .backgroundColor('#fff')
        .margin({right: 10, bottom: 10})
        .borderRadius(5)
        .alignItems(HorizontalAlign.Start)
        .padding({bottom: 10})
        Column({ space: 8 }) {
          Image($r('app.media.xw'))
            .width('100%')
            .borderRadius({topLeft: 5, topRight: 5})
          Text('[ 程序员必备 ] 最高版本-格子衫')
            .fontSize(12)
            .maxLines(1)
            .textOverflow({overflow: TextOverflow.Ellipsis})
            .padding({left: 10, right: 10})
          Text() {
            Span('￥333 ')
              .fontSize(12)
              .fontColor('#f52555')
            Span('销量666')
              .fontSize(8)
              .fontColor('#999')
          }
          .padding({left: 10, right: 10})
        }
        .width('47%')
        .backgroundColor('#fff')
        .margin({right: 10, bottom: 10})
        .borderRadius(5)
        .alignItems(HorizontalAlign.Start)
        .padding({bottom: 10})
        Column({ space: 8 }) {
          Image($r('app.media.xw'))
            .width('100%')
            .borderRadius({topLeft: 5, topRight: 5})
          Text('[ 程序员必备 ] 最高版本-格子衫')
            .fontSize(12)
            .maxLines(1)
            .textOverflow({overflow: TextOverflow.Ellipsis})
            .padding({left: 10, right: 10})
          Text() {
            Span('￥444 ')
              .fontSize(12)
              .fontColor('#f52555')
            Span('销量666')
              .fontSize(8)
              .fontColor('#999')
          }
          .padding({left: 10, right: 10})
        }
        .width('47%')
        .backgroundColor('#fff')
        .margin({right: 10, bottom: 10})
        .borderRadius(5)
        .alignItems(HorizontalAlign.Start)
        .padding({bottom: 10})
        Column({ space: 8 }) {
          Image($r('app.media.xw'))
            .width('100%')
            .borderRadius({topLeft: 5, topRight: 5})
          Text('[ 程序员必备 ] 最高版本-格子衫')
            .fontSize(12)
            .maxLines(1)
            .textOverflow({overflow: TextOverflow.Ellipsis})
            .padding({left: 10, right: 10})
          Text() {
            Span('￥555 ')
              .fontSize(12)
              .fontColor('#f52555')
            Span('销量666')
              .fontSize(8)
              .fontColor('#999')
          }
          .padding({left: 10, right: 10})
        }
        .width('47%')
        .backgroundColor('#fff')
        .margin({right: 10, bottom: 10})
        .borderRadius(5)
        .alignItems(HorizontalAlign.Start)
        .padding({bottom: 10})
        Column({ space: 8 }) {
          Image($r('app.media.xw'))
            .width('100%')
            .borderRadius({topLeft: 5, topRight: 5})
          Text('[ 程序员必备 ] 最高版本-格子衫')
            .fontSize(12)
            .maxLines(1)
            .textOverflow({overflow: TextOverflow.Ellipsis})
            .padding({left: 10, right: 10})
          Text() {
            Span('￥444 ')
              .fontSize(12)
              .fontColor('#f52555')
            Span('销量444')
              .fontSize(8)
              .fontColor('#999')
          }
          .padding({left: 10, right: 10})
        }
        .width('47%')
        .backgroundColor('#fff')
        .margin({right: 10, bottom: 10})
        .borderRadius(5)
        .alignItems(HorizontalAlign.Start)
        .padding({bottom: 10})
      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#f5f6f7')
    .padding(10)
  }
}

3 层叠布局

3.1 层叠布局概述

层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。

层叠布局通过 Stack 容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。

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

3.2 基本使用

Stack 组件为容器组件，容器内可包含各种子元素。其中子元素默认进行居中堆叠。

子元素被约束在Stack下，进行自己的样式定义以及排列。

@Entry
@Component
struct Index{
  build() {
    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.3 对齐方式

对齐方式

参数：alignContent

取值：枚举 Alignment

  Stack({ alignContent: Alignment.BottomEnd }) {
        Column(){}
        .width('90%')
        .height(130)
        .backgroundColor(Color.Gray)
        Text('程序员Feri')
          .width('60%')
          .height('60%')
          .backgroundColor(Color.Orange)
        Button('button')
          .width('30%')
          .height('30%')
          .backgroundColor('#ff8ff3eb')
          .fontColor('#000')
      }
      .width('100%')
      .height(150)
      .backgroundColor(Color.Pink)

3.4 Z 序控制

属性：zIndex(数字)

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

 Stack({ alignContent: Alignment.BottomEnd }) {
        Column(){}
        .width('90%')
        .height(130)
        .backgroundColor(Color.Gray)
        Text('程序员Feri')
          .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)
      Stack({ alignContent: Alignment.BottomEnd }) {
        Column(){}
        .width('90%')
        .height(130)
        .backgroundColor(Color.Gray)
        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)

呀，不知不觉已经接近0点，明天还得上班，睡觉睡觉，这篇就到这里吧，求关注哈

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值