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

最新推荐文章于 2024-06-25 15:49:31 发布
最新推荐文章于 2024-06-25 15:49:31 发布
阅读量802 收藏 11
点赞数 17
分类专栏： HarmonyOS Next 纯血星河版 Harmony OS 4.0 + Next 文章标签： harmonyos
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Forever_Hopeful/article/details/138382484
版权

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

文章目录

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

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

总结

在这里插入图片描述

脱发使我稳重
关注
  • 17
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
HarmonyOS鸿蒙开发常用4种布局详细说明
qq_36255346的博客
03-17 2916
HarmonyOS鸿蒙开发常用4种布局详细说明1、线性布局2、层叠布局3、网格布局4、列表布局。
HarmonyOS Next应用开发案例大全-(持续更新中……)
shudaoshanQAQ的博客
04-07 2741
文章归纳了一些常见的性能问题，并提供相应的解决方案
Flutter: 弹性布局Flex(Expanded)、流式布局Wrap、Flow
手写我对你的温柔
05-13 4119
用Android原生实现流式布局【实现例如app的很多标签】需要自定义View继承自ViewGroup，然后代码量也不小。 相关自定义View实现流式布局，请参考这位老兄的博客： https://blog.csdn.net/u013107751/article/details/81701606 或者慕课网上的android免费课程有一门课是专门实现自定义流式布局的。 而在Flutter中...
【愚公系列】保姆级教程带你实现HarmonyOS手语猜一猜元服务
时光隧道
11-16 5万+
而通过元服务的方式，可以将购物过程拆分为多个服务，例如“商品浏览”、“购物车”、“支付”等，无需安装应用，通过丰富的入口直达服务页面。手语学习元服务通过数字化的方式提供了学习手语的机会，让更多的人能够了解手语，学习手语，以便更好地与聋人交流和理解聋人的需求。每一个万能卡片都是一个在桌面上“永远打开的”元服务/应用，以卡片的形式展示元服务/应用的重要信息，并通过轻量级的交互行为实现服务的直达。手语学习应用可以提供数字化的手语课程，让更多的人能够学习手语，提高对聋人的理解和尊重，促进聋人的教育和融入社会。
【愚公系列】2023年12月 HarmonyOS教学课程 011-ArkUI组件（List）
时光隧道
12-03 3万+
列表是一种非常有用且功能强大的容器，它常用于呈现同类型或多类型数据集合，例如图片、文本、音乐、通讯录、购物清单等。列表对于显示大量内容而不耗费过多空间和内存是非常有帮助的，因为当列表项数量超过屏幕大小时，可以自动提供滚动功能。这使得列表成为构建结构化、可滚动信息的理想容器。使用列表可以轻松、高效地显示信息。使用List组件，可以按垂直或水平方向线性排列子组件，这些子组件可以是单个视图，也可以使用ForEach迭代一组行或列，或混合任意数量的单个视图和ForEach结构，构建一个灵活的列表。
数据结构：栈和队列(Stack & Queue)【详解】
热门推荐
UniqueUnit的博客
02-19 22万+
栈和队列知识框架 栈 一、栈的基本概念 1、栈的定义 栈（Stack）：是只允许在一端进行插入或删除的线性表。首先栈是一种线性表，但限定这种线性表只能在某一端进行插入和删除操作。 栈顶（Top）：线性表允许进行插入删除的那一端。 栈底（Bottom）：固定的，不允许进行插入和删除的另一端。 空栈：不含任何元素的空表。 栈又称为先进先出（Last In First Out）的线性表，简称LIFO结构 2、栈的基本操作 InitStack(&S)：初始化一个空栈S。 StackEmpty(S)：
HarmonyOS 开发实例—蜜蜂 AI 助手
白洞，白色的明天在等着我们
12-13 1万+
AppGallery Connect（简称 AGC）致力于为应用的创意、开发、分发、运营、经营各环节提供一站式服务，构建全场景智慧化的应用生态体验。通过蜜蜂 AI 助手元服务的开发，我们体验到了端云一体化带来的便捷，尤其注册登陆这一块，有了云端的接入，我们可以很快的加入。另外在项目里我们还用到了低码能力，不用一行代码，就完成了手机号登陆的功能。本次鸿蒙和 AI 的结合，给了我新的体验。大家也可以自行尝试下 HarmonyOS 的开发，会给你带来不一样的体验。
Flutter 相对布局之Stack
yechaoa
08-12 4992
效果 简介 相对布局，类似于android中的RelativeLayout、FrameLayout。 既可以相对父容器确定自己的位置，也可以多个widget重叠显示。 Stack与Positioned搭配使用。 源码 Stack Stack({ Key key, this.alignment = AlignmentDirectional.topStart, this....
HCIA-HarmonyOS应用开发工程师 V2.0 模拟考试
牛肉胡辣汤
07-19 5717
/ xxx.ets @Entry @Component struct CounterExample { @State value: number = 0 build() { Column() { Counter() { Text(this.value.toString()) }.margin(100) .onInc(() => { this.value++ }) .onDec(() => { this.value-- }) }.width("100%") } }D. 多设备预览时，不支持双向预览功能。
CSS教程:网页布局定位及z-index解释
09-27
声明定位元素：position属性值设置除默认值static以外的元素...平台：win/IE win/FFz-index用来确定定位元素在垂直于显示屏方向（以下称为Z轴）上的层叠顺序值：auto | 整数 | inherit默认：auto适用于：定位元素继承性
Flutter布局组件之层叠组件Stack和Positioned
01-08
层叠布局和Web中的绝对定位、Android中的Frame布局是相似的，子组件可以根据距父容器四个角的位置来确定自身的位置。绝对定位允许子组件堆叠起来（按照代码中声明的顺序）。Flutter中使用Stack和Positioned这两个...
Flutter页面布局之Stack层叠组件
01-08
Stack表示堆的意思，我们可以使用Stack或者结合Align或Positond实现定位布局 Stack常用属性： 属性 说明 alignment 配置所有子元素的显示位置 children 子元素 结合Positioned组件来控制每个子...
Flutter布局模型之层叠定位
08-27
Flutter 布局模型中的层叠定位是指在 Flutter 中使用 Stack 控件来实现子控件的层叠排列，以达到灵活的布局方式。层叠定位的核心是使用 Positioned 控件来包裹具体的子控件，并通过 top、right、bottom 和 left 属性...
HarmonyOS Next开发学习手册——通过startAbility拉起文件处理类应用
最新发布
maniuT的博客
06-25 866
开发者可以通过调用startAbility接口，由系统从已安装的应用中寻找符合要求的应用来实现打开特定文件的意图，例如：浏览器下应用下载PDF文件，可以调用此接口选择文件处理应用打开此PDF文件。开发者需要在请求中设置待打开文件的URI路径（uri）、文件格式（type）等字段，以便系统能够识别，直接拉起文件打开应用或弹出一个选择框，让用户选择合适的应用来打开文件，效果示意如下图所示。支持打开文件的应用需要在module.json5配置文件中声明文件打开能力。flags 相关参数说明。
【鸿蒙 HarmonyOS】尺寸设置：size/layoutWeight/constraintSize
weixin_71403100的博客
06-22 1196
常见尺寸：width（宽度）、height（高度）、padding（内边距）、margin（外边距）主要整理下size（设置高宽尺寸）、layoutWeight（对子组件进行重新布局）、constraintSize（设置约束尺寸，组件布局时，进行尺寸范围限制）
鸿蒙HarmonyOS服务卡片实战
nanxuan521的专栏
06-21 1114
鸿蒙HarmonyOS服务卡片的创建，交互以及数据更新
鸿蒙仓颉编程语音来了，ArkTs语言危矣？
甄兴旺的博客
06-21 614
鸿蒙仓颉编程语言来了，请允许我哭会~~呜呜呜~~我的arkts啊。同时api12 不再是秘密了 各位！鸿蒙直播大会开始一个小时了，地址。仓颉编程语言文档地址。
stack&&与stack&的区别
05-26
`stack&&` 和 `stack&` 是 C++ 中的两种不同的指针类型，它们之间的区别在于： 1. `stack&&` 是右值引用类型，而 `stack&` 是左值引用类型。 2. 右值引用类型是 C++11 中引入的新特性，它可以绑定到临时对象（即将被销毁的对象），而左值引用只能绑定到具有名称的对象。 3. `stack&&` 可以用于实现移动语义，即将一个对象的资源所有权从一个对象转移到另一个对象，而 `stack&` 只能用于访问对象。 综上所述，`stack&&` 和 `stack&` 的主要区别在于它们的语义和用法。`stack&&` 通常用于实现高效的对象移动，而 `stack&` 通常用于访问和修改对象。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

脱发使我稳重

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

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

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

打赏作者

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

抵扣说明：

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

余额充值