HarmonyOS Next 纯血星河版【四】：Flex弹性布局 & 绝对定位 & 层叠布局Stack & Slider滚动条组件 & 字符串拼接、模板字符串 & 数据类型转换

于 2024-05-02 11:44:59 发布
阅读量917 收藏 11
点赞数 17
分类专栏： HarmonyOS Next 纯血星河版 Harmony OS 4.0 + Next 文章标签： harmonyos
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/forever_hopeful/article/details/138382484
版权
本文介绍了HarmonyOSNext中的Flex弹性布局，包括基本使用、换行-wrap以及实战练习。同时涵盖了绝对定位的用法、zIndex层级管理，以及Stack组件的运用和Slider滑动条组件的实例。还涉及了模板字符串和类型转换，如字符串转数字和数字转字符串操作。
摘要由CSDN通过智能技术生成

改文章布局会有一些综合的练习，后续会跟新补充…

文章目录

HarmonyOS Next 纯血星河版【四】

Flex- 弹性布局

在这里插入图片描述

一、 Flex- 基本使用

在这里插入图片描述

在这里插入图片描述

@Entry
@Component
struct FlexDemo {
  build() {
    Column() {
      Flex({
        // 三个参数 ：  1. 主轴方向   2. 主轴对齐方式  3. 交叉轴对齐方式
        direction: FlexDirection.RowReverse,
        justifyContent: FlexAlign.Start,
        alignItems: ItemAlign.Start
      }) {
        Text('盒子1')
          .width(80)
          .height(80)
          .backgroundColor('#FFCCAA')
          .borderRadius(15)
          .border({
            width: 2,
            color: Color.White
          })
          .textAlign(TextAlign.Center)
        Text('盒子2')
          .width(80)
          .height(80)
          .backgroundColor('#FFCCAA')
          .borderRadius(15)
          .border({
            width: 2,
            color: Color.White
          })
          .textAlign(TextAlign.Center)
        Text('盒子3')
          .width(80)
          .height(80)
          .backgroundColor('#FFCCAA')
          .borderRadius(15)
          .border({
            width: 2,
            color: Color.White
          })
          .textAlign(TextAlign.Center)
      }
    }
    .height('80%')
    .width('100%')
    .backgroundColor('#36D')
    .padding(10)
  }
}

二、 Flex- 换行 - wrap

在这里插入图片描述

代码示例：

@Entry
@Component
struct FlexWrapDemo {
  build() {
    Column() {
      Flex({
        direction: FlexDirection.Row,
        justifyContent: FlexAlign.Start,
        wrap: FlexWrap.Wrap
      }) {
        Text('盒子1')
          .width(80)
          .height(80)
          .backgroundColor('#FFCCAA')
          .borderRadius(15)
          .border({
            width: 2,
            color: Color.White
          })
          .textAlign(TextAlign.Center)
        Text('盒子2')
          .width(80)
          .height(80)
          .backgroundColor('#FFCCAA')
          .borderRadius(15)
          .border({
            width: 2,
            color: Color.White
          })
          .textAlign(TextAlign.Center)
        Text('盒子3')
          .width(80)
          .height(80)
          .backgroundColor('#FFCCAA')
          .borderRadius(15)
          .borderRadius(15)
          .border({
            width: 2,
            color: Color.White
          })
        Text('盒子3')
          .width(80)
          .height(80)
          .backgroundColor('#FFCCAA')
          .borderRadius(15)
          .borderRadius(15)
          .border({
            width: 2,
            color: Color.White
          })
        Text('盒子3')
          .width(80)
          .height(80)
          .backgroundColor('#FFCCAA')
          .borderRadius(15)
          .borderRadius(15)
          .border({
            width: 2,
            color: Color.White
          })
        Text('盒子3')
          .width(80)
          .height(80)
          .backgroundColor('#FFCCAA')
          .borderRadius(15)
          .borderRadius(15)
          .border({
            width: 2,
            color: Color.White
          })
          .textAlign(TextAlign.Center)
      }
    }
    .width(300)
    .height(300)
    .backgroundColor('#36D')
  }
}

在这里插入图片描述

三、 Flex练习

在这里插入图片描述
代码示例：

@Entry
@Component
struct FlexTest {
  build() {
    Column() {
      Text('阶段选择')
        .width('100%')
        .fontSize(24)
        .fontWeight(700)
      Column() {
        Flex({
          direction: FlexDirection.Row,
          justifyContent: FlexAlign.Center,
          alignItems: ItemAlign.Start,
          wrap: FlexWrap.Wrap
        }) {
          Text('ArkTS')
            .height(36)
            .backgroundColor('#f8fbfc')
            .borderRadius(5)
            .margin(5)
          Text('ArkTS')
            .height(36)
            .backgroundColor('#f8fbfc')
            .borderRadius(5)
            .margin(5)
          Text('ArkTS')
            .height(36)
            .backgroundColor('#f8fbfc')
            .borderRadius(5)
            .margin(5)
          Text('ArkTS')
            .height(36)
            .backgroundColor('#f8fbfc')
            .borderRadius(5)
            .margin(5)
          Text('鸿蒙开发')
            .height(36)
            .backgroundColor('#f8fbfc')
            .borderRadius(5)
            .margin(5)
          Text('界面开发')
            .height(36)
            .backgroundColor('#f8fbfc')
            .borderRadius(5)
            .margin(5)
          Text('ArkTS')
            .height(36)
            .backgroundColor('#f8fbfc')
            .borderRadius(5)
            .margin(5)
          Text('系统能力开发')
            .height(36)
            .backgroundColor('#f8fbfc')
            .borderRadius(5)
            .margin(5)
          Text('ArkTS')
            .height(36)
            .backgroundColor('#f8fbfc')
            .borderRadius(5)
            .margin(5)
        }
        .width('100%')
        .height(300)
        .backgroundColor('#FFCCAA')
      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#FAACCD')

  }
}

四、 Flex 总结

在这里插入图片描述

position - 绝对定位

在这里插入图片描述

一、绝对定位的基本使用

不使用 绝对定位 如下所示：
在这里插入图片描述
当我们添加了绝对定位代码后

@Entry
@Component
struct PositionDemo {
  build () {
    Column() {
      Text('盒子一')
        .width(80)
        .height(80)
        .backgroundColor(Color.Red)
      Text('盒子二')
        .width(80)
        .height(80)
        .backgroundColor(Color.Pink)
        // 添加绝对定位 position 默认左上角 也就是 x： 0   y ： 0
        .position({
          x: 50,
          y: 50
        })
      Text('盒子三')
        .width(80)
        .height(80)
        .backgroundColor(Color.Orange)
    }
    .width(300)
    .height(300)
    .backgroundColor('#FFCCAA')
  }
}

使用后效果图如下：
在这里插入图片描述

二、 zIndex - 层级关系

在这里插入图片描述

        .position({
          x: 50,
          y: 50
        })
        .zIndex(1)
  • 这样就可以实现层级的提升了

三、 绝对定位总结

在这里插入图片描述

层叠布局 - Stack

在这里插入图片描述

在这里插入图片描述

一、使用 Stack

在这里插入图片描述

  • 可以使用 zIndex修改层级哦
@Entry
@Component
struct StackDemo {
  build () {
    // Stack ({ 指定层叠的规则 }) { 需要层叠的组件 }
    Column() {
      Stack({
        alignContent: Alignment.TopStart
      }) {
        Text('盒子一')
          .width(240)
          .height(240)
          .backgroundColor(Color.Green)
        Text('盒子二')
          .width(150)
          .height(150)
          .backgroundColor(Color.Yellow)
        Text('盒子三')
          .width(50)
          .height(50)
          .backgroundColor(Color.Orange)
      }
      .width(300)
      .height(500)
      .backgroundColor(Color.Pink)
    }
    .width('100%')
    .height('100%')
  }
}

二、 总结：

在这里插入图片描述

Slider 滑动条组件

在这里插入图片描述


Slider({
          value: this.imageWidth,
          min: 100,
          max: 300,
          step: 10,
          style: SliderStyle.InSet
        })
          .width(300)
          .blockColor('#36D')
          .selectedColor('#ff0000')
          .showSteps(true)
          .showTips(true)
          .trackThickness(10)
          .onChange(value => {
            this.imageWidth = value
          })

效果图如下：
在这里插入图片描述

字符串拼接

在这里插入图片描述

一、基本使用

在这里插入图片描述

二、 总结

在这里插入图片描述

模板字符串

在这里插入图片描述

一、基本使用

在这里插入图片描述

二、总结

在这里插入图片描述

类型转换（数字和字符串）

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

一、基本使用

字符串转数字
Number（） 最常用的

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

parseInt （）

在这里插入图片描述

parseFloat （）

在这里插入图片描述

数字转字符串
toString 和 toFixed

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

总结

在这里插入图片描述

脱发使我稳重
关注
专栏目录
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

脱发使我稳重

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值