线性布局-保姆级教程

于 2024-08-20 09:46:45 发布
阅读量340 收藏 7
点赞数 19
文章标签： harmonyos 线性布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68705025/article/details/141334260
版权

文章目录


线性布局（LinearLayout）是开发中最常用的布局，通过线性容器Row和Column构建。线性布局是其他布局的基础，其子元素在线性方向上（水平方向和垂直方向）依次排列。线性布局的排列方向由所选容器组件决定，Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。根据不同的排列方向，开发者可选择使用Row或Column容器创建线性布局。

1.Row子元素布局

  • 注意：如果使用的是最新版的IDE开发工具，那么预览器上方有一块白色的空白属于正常。这是手机的挖孔，大家正常开发即可。
@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row(){
      Row(){
        Row().width('20%').height(400).backgroundColor(Color.Yellow)
        Row().width('20%').height(400).backgroundColor(Color.Orange)
        Row().width('20%').height(400).backgroundColor(Color.Yellow)
        Row().width('20%').height(400).backgroundColor(Color.Green)
        Row().width('20%').height(400).backgroundColor(Color.Yellow)

      }
    }

  }
}

我们首先来看Row().width()。整个水平排列方向的宽度为100%，这里我将每个设为百分之20，那么他在预览结果中现实的就是水平方向上高度为400的长方形块。
在这里插入图片描述

2.Column子元素布局

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column(){
      Column(){
        Column().width('100%').height(50).backgroundColor(Color.Yellow)
        Column().width('100%').height(50).backgroundColor(Color.Orange)
        Column().width('100%').height(50).backgroundColor(Color.Yellow)
        Column().width('100%').height(50).backgroundColor(Color.Orange)
        Column().width('100%').height(50).backgroundColor(Color.Yellow)
      }
    }

  }
}

这里我将每个元素的宽度设为100%(即横向铺满整个屏幕)，高度设为50。那会从上到下呈现出五个铺满屏幕的元素
在这里插入图片描述

3.Row容器排列方向上的间距

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
      Row({ space: 50 }) {

        Row().width('10%').height(150).backgroundColor(0xF5DEB3)
        Row().width('10%').height(150).backgroundColor(0xD2B48C)
        Row().width('10%').height(150).backgroundColor(0xF5DEB3)
      }.width('100%')
    }

  }

在Row容器中，如果想将几个元素之间有间隔，我们只需要在Row()中添加{space：距离}即可
在这里插入图片描述

4. Column容器排列方向上的间距

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column({ space: 20 }) {

      Row().width('90%').height(50).backgroundColor(0xF5DEB3)
      Row().width('90%').height(50).backgroundColor(0xD2B48C)
      Row().width('90%').height(50).backgroundColor(0xF5DEB3)
    }.width('100%')

  }
}

在Column容器中，如果想将几个元素之间有间隔，我们只需要在Cloumn()中添加{space：距离}即可
在这里插入图片描述

5.Column在水平方向上的对齐方式

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column() {

      Row().width('90%').height(50).backgroundColor(0xF5DEB3)
      Row().width('90%').height(50).backgroundColor(0xD2B48C)
      Row().width('90%').height(50).backgroundColor(0xF5DEB3)
      //水平方向剧中对齐
    }.width('100%').height(400).alignItems(HorizontalAlign.Center).backgroundColor(Color.Green)

  }
}

HorizontalAlign的几个参数（基于水平方向）
Start:左对齐
Center:居中对齐
End:右对齐
这里我将整个容器的高度设置为400，背景颜色设置为绿色。可以有一个参考。
在这里插入图片描述

6.Row在竖直方向上的对齐方式

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row() {

      Column().width('90%').height(50).backgroundColor(0xF5DEB3)
      Column().width('90%').height(50).backgroundColor(0xD2B48C)
      Column().width('90%').height(50).backgroundColor(0xF5DEB3)
    }.width('20%').alignItems(VerticalAlign.Top)

  }
}

VerticalAlign的参数（基于垂直方向）
Top:顶部对齐
Center：居中对齐
Bottom：底部对齐

7.Column在主轴上的排列

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column({}) {
      Column() {
      }.width('80%').height(50).backgroundColor(Color.Yellow)

      Column() {
      }.width('80%').height(50).backgroundColor(Color.Blue)

      Column() {
      }.width('80%').height(50).backgroundColor(Color.Yellow)
    }.width('100%').height(300).backgroundColor(Color.Green).justifyContent(FlexAlign.Center)

  }
}

justifyContent参数
Start：元素在垂直方向方向首端对齐，第一个元素与行首对齐
Center:中心对齐
End:元素在垂直方向方向尾部对齐，最后一个元素与行尾对齐
SpaceBetween：垂直方向均匀分配元素，相邻元素之间距离相同，第一个元素与行首对齐，最后一个元素与行尾对齐。（平均分配）
在这里插入图片描述

SpaceAround：垂直方向均匀分配元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
在这里插入图片描述
SpaceEvenly：垂直方向均匀分配元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。（平均分配）
在这里插入图片描述

这里我将整个容器的高度设置为300，背景为绿色，参数设置为Center。能有一个更直观的视觉效果。
在这里插入图片描述

8.Row在主轴上的排列

这里将测试代码粘贴给大家，FlexAlign的参数与Column的类似，只是排列方式不同

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Row() {
      }.width('30%').height(50).backgroundColor(Color.Yellow)

      Row() {
      }.width('30%').height(50).backgroundColor(Color.Blue)

      Row() {
      }.width('30%').height(50).backgroundColor(Color.Yellow)
    }.width('100%').height(200).backgroundColor(Color.Green).justifyContent(FlexAlign.Start)

  }
}

9.自适应拉伸

大家在到一个新地方的时候是不是都要连接Wifi，那我们来想一下，是不是文字在最左边，然后按钮在最右边，但实际我们开发的过程中，他的最初形态是如下图：
在这里插入图片描述
但是这样看，属实影响美观，我们要怎么改变呢？

@Entry
@Component
struct Index{
  build() {
    Column() {
      Row() {
        Text('Wifi').fontSize(18)
        Blank() //自适应拉伸
        //按钮组件，isOn，默认是开启/关闭装填
        Toggle({ type: ToggleType.Switch, isOn: true })
      }.backgroundColor(Color.White).borderRadius(15).padding({ left: 12 }).width('100%')
    }.backgroundColor(Color.Gray).padding(20).width('100%')
  }
}

我们在按钮上方的代码加上Blank()，就可以自适应拉伸了，效果如下图
在这里插入图片描述

10. 自适应延伸

大家在网上购物的时候，是不是物品太多了，一页没法展示，那我们是不是u就会往下滑，这就是自适应延伸。

@Entry
@Component
struct Index{
  scroller: Scroller = new Scroller();
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

  build() {

    Scroll(this.scroller) {
      Column() {

        ForEach(this.arr, (item:string) => {
          Text(item.toString())
            .width('90%')
            .height(150)
            .backgroundColor(Color.Blue)
            .borderRadius(15)
            .fontSize(16)
            .textAlign(TextAlign.Center)
            .margin({ top: 10 })
        })
      }.width('100%')
    }
    .backgroundColor(0xDCDCDC)
    .scrollable(ScrollDirection.Vertical) // 滚动方向为垂直方向
    .scrollBar(BarState.On) // 滚动条常驻显示
    .scrollBarColor(Color.Gray) // 滚动条颜色
    .scrollBarWidth(10) // 滚动条宽度
    .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹
  }
}

在这里插入图片描述
有竖直方向，当然还有水平方向了！

@Entry
@Component
struct Index{
  scroller: Scroller = new Scroller();
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

  build() {

    Scroll(this.scroller) {
      Row({space:12}) {

        ForEach(this.arr, (item:string) => {
          Text(item.toString())
            .height('90%')
            .width(150)
            .backgroundColor(Color.Blue)
            .borderRadius(15)
            .fontSize(16)
            .textAlign(TextAlign.Center)
            .margin({ top: 10 })
        })
      }.height('100%')
    }
    .backgroundColor(0xDCDCDC)
    .scrollable(ScrollDirection.Horizontal) // 滚动方向为垂直方向
    .scrollBar(BarState.On) // 滚动条常驻显示
    .scrollBarColor(Color.Gray) // 滚动条颜色
    .scrollBarWidth(10) // 滚动条宽度
    .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹
  }
}

在这里插入图片描述

程序员大凯
关注
  • 19
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
SUMO学习-入门篇-保姆级教程.pdf
01-17
SUMO学习-入门篇教程 SUMO（Simulation of Urban Mobility）是一款交通运输仿真软件，广泛应用于交通运输领域的研究和学习。下面是SUMO学习的入门篇教程，涵盖SUMO的安装、Python的安装、路网生成、Trips文件生成、...
2023最新版kali安装教程-保姆级
08-01
《2023最新版kali安装教程-保姆级详解》 Kali Linux是一款基于Debian的开源操作系统，专门用于网络安全审计和渗透测试。本文将详细介绍2023年最新版Kali Linux的安装步骤，从下载镜像到在VMware上创建虚拟机，再到...
yolov5-obb保姆级教程
06-05
YOLOv5-OBB（Oriented Bound Box）保姆级教程主要涵盖了使用YOLOv5框架进行物体检测，特别是处理倾斜物体的定向边界框（Oriented Bound Box）的训练与应用。YOLO（You Only Look Once）是一种实时目标检测系统，而...
Arduino-循迹小车-保姆级教程-arduino循迹小车详细制作过程.docx
03-12
《Arduino-循迹小车-保姆级教程》 在本文中，我们将深入探讨如何使用Arduino构建一款具有循迹功能的小车。这个项目涉及到的主要元件包括Arduino Nano、L298N电机驱动模块、直流减速电机、万向轮、亚克力板、轮胎...
鸿蒙 点击获取电话号拨打电话 @ohos.telephony.call (拨打电话)
qq_52602294的博客
08-19 324
【代码】鸿蒙 点击获取电话号拨打电话 @ohos.telephony.call (拨打电话)
鸿蒙Harmony实战：Accessibility Kit应用开发
weixin_55362248的博客
08-19 636
Accessibility Kit（无障碍开发服务）提供扩展服务的开放能力，三方可基于此开放能力开发出类似读屏软件的扩展服务，同时也为三方应用提供开放能力，使三方应用可以更好的适配扩展服务，以更好的服务于障碍人群和障碍场景。例如利用读屏软件，用户可以“听见”当前屏幕内容。
HarmonyOS应用四之页面加载构建以及数据请求
zouyang920的博客
08-19 132
【代码】HarmonyOS应用四之页面加载及构建。
HarmonyOS 开发
一个大佬的博客
08-18 775
【代码】HarmonyOS 开发。
HarmonyOs透明弹窗(选择照片弹窗样式)
qq_42111674的博客
08-19 89
鸿蒙中实现一个透明弹窗案例(复制可用)......
鸿蒙内核源码分析(进程管理篇) | 谁在管理内核资源？
黎程雨的博客
08-15 736
的情况下 系统最多是64个进程，但有两个进程先被占用，用户态和内核态各一个，他们是后续创建进程的根，所以最多留给外面的只有 62个进程可创建，代码的最后两个根进程的task阻塞链表被清空了,因为没有阻塞任务当然要清空.进程创建或fork时，拿到该进程控制块后进入Init状态，处于进程初始化阶段，当进程初始化完成将进程插入调度队列，此时进程进入就绪状态。阻塞进程内的任意线程恢复就绪态时，进程被加入到就绪队列，同步转为就绪态，若此时发生进程切换，则进程状态由就绪态转为运行态。
鸿蒙开发入门day05-ArkTs语言（接口与关键字）
来自计科大一萌新的编程记录本
08-14 1912
学习目标：了解ArkTS语言中的接口、泛型类型与关键字this
鸿蒙HarmonyOS开发：ArkTS声明式UI规范
weixin_55362248的博客
08-15 764
ArkTS以声明方式组合和扩展组件来描述应用程序的UI，同时还提供了基本的属性、事件和子组件配置方法，帮助开发者实现应用交互逻辑。
鸿蒙公共事件和通知
qq_60694399的博客
08-16 262
创建一个鸿蒙应用项目，在Index页面中创建一个按钮，点击该按钮，可以创建一个公共事件订阅者，可以订阅自定义公共事件（事件名称为：“ncwu.harmonytest.event1”）；创建一个Toggle组件（type为Switch），点击可以订阅或取消订阅该自定义公共事件，订阅后可以接受到发布的该自定义公共事件，并在页面中用Text组件显示事件详情；然后在创建一个按钮，点击可以发布该自定义公共事件；最后，在页面中创建一个按钮，点击可以发布一个10秒倒计时定时提醒。
【HarmonyOS】鸿蒙集成Flutter
这家伙很懒，博客简介都不写
08-19 171
下载地址：https://developer.huawei.com/consumer/cn/download/
鸿蒙应用程序框架基础
gitzzp的博客
08-17 1069
pack.info文件猫叔了App Pack中每个HAP和HSP的属性，包含App中的bundleName和versionCode信息，以及Module中的name、type和abilites等信息。每个应用中至少包含一个.hap文件，可能包含若干个.hsp文件，也可能不包含。一个应用中的所有.hap文件和.hsp文件合并在一起称为一个Bundle，其对应的bundleName是应用的唯一标识。当应用发布上架到应用市场时，需要将Bundle打包为一个.app文件用于上架，这个.app文件称为。
鸿蒙内核源码分析(任务管理篇) | 任务池是如何管理的？
黎程雨的博客
08-16 355
在鸿蒙内核中，广义上可理解为一个任务就是一个线程
探索 HarmonyOS 的层叠布局：灵活的 Stack 容器
最新发布
A1551143530的博客
08-19 380
在实际开发中，有时需要更复杂的元素堆叠关系。此时，可以通过 Stack 容器的zIndex属性控制子元素的显示层级。zIndex值越大，元素显示的层级越高。利用这一特性，开发者可以精确地管理不同元素的显示顺序，避免重要内容被遮挡。例如，下面的代码展示了如何通过zIndexColumn() {Text('Stack子元素1').fontSize(20)Column() {Text('Stack子元素2').fontSize(20)Column() {
鸿蒙（API 12 Beta3版）【分段式拍照】媒体相机开发指导(ArkTS)
鸿蒙的技术博客
08-16 863
分段式拍照是相机的重要功能之一，即应用下发拍照任务后，系统将分多阶段上报不同质量的图片。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

程序员大凯

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

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

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

打赏作者

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

抵扣说明：

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

余额充值