ArkTs布局组件（一）

news2025/10/31 14:25:10

通用属性

名称参数描述
widthLength
heightLength
size{width?:Length,height?:Length}设置宽高尺寸
paddingPadding|Length内边距
marginMargin|Length外边距
constraintSize{minWidth?:Length|minHeight?:Length|maxWidth?:Length|maxHeight?:Length}设置约束尺寸，优先级高于width和height
layoutWeightnumber|string水平或垂直弹性尺寸

Length长度类型，用于描述尺寸单位

类型说明
number默认单位vp(虚拟像素)
string需要显示指定像素单位，如’10px’,或设置百分比字符串，如’100%’
Resource资源引用类型，引入系统资源或应用资源中的尺寸

vp虚拟像素单位：使元素在不同密度的设备上具有一致的视觉体量
fp字体像素单位：font pixel，大小默认与vp相同，即1vp=1fp。如果用户在设置中使用了更大的字体，字体的实际显示大小就会在vp的基础上乘以用户设置的缩放系数，即1fp = 1vp*缩放系数

Column组件

Column(value?: {space?: string | number; })
参数

参数参数类型描述
spacestring|number纵向布局元素垂直方向间距

属性

名称参数类型描述
alignItemsHorizontalAlign设置子组件在水平方向上的对齐方式
justifyContentFlexAlign设置子组件在垂直方向上的对齐方式

Raw组件

Raw(value?: {space?: string | number; })
参数

参数参数类型描述
spacestring|number横向布局元素间距

属性

名称参数类型描述
alignItemsVerticalAlign设置子组件在垂直方向上的对齐方式
justifyContentFlexAlign设置子组件在水平方向上的对齐方式
Column({ space: 10 }) {
      Row() {
        Row() {
          Image($r('app.media.ic_controlcenter_screenshot_filled'))
            .width(48)
            .height(48)
        }.layoutWeight(1)

        Row() {
          Image($r('app.media.icon'))
            .width(48)
            .height(48)
        }
        .backgroundColor('#ff9f9a6c')
        .layoutWeight(2)
        .width(100)
        .height(100)
        .justifyContent(FlexAlign.Center)
      }.backgroundColor('#ffe590a4')
      .width('100%')
      .height(200)

      Row() {
        Image($r('app.media.ic_contacts_company')).width(48).height(48)
      }.backgroundColor('#ff72dd84')
      .width(200)
      .height(200)

      Row() {
        Image($r('app.media.ic_controlcenter_screen_recording_filled')).objectFit(ImageFit.Contain)
          .width(48)
          .height(48)
      }
      .backgroundColor('#ff90d4e5')
      .width(200)
      .constraintSize({ minWidth: 300 })
      .height(200)
      .alignItems(VerticalAlign.Center)
    }.size({ width: '100%', height: '100%' })
    .justifyContent(FlexAlign.SpaceAround)
    .alignItems(HorizontalAlign.Center)

在这里插入图片描述

自定义组件

@Entry
@Component
struct CustomePages {
  //自定义内部组件
  @Builder BodyWidget() {
    Row() {
    }.layoutWeight(1)
    .backgroundColor('#ffec7b7b')
    .height(100)
  }

  build() {
    Row({ space: 10 }) {
      this.BodyWidget()
      Container({ color: '#ee2233', image: 'ic_contacts_company' })
    }
  }
}
//全局自定义组件，都能用
@Component
struct Container {
  color: string = '#22ffee'
  image: string = 'icon'

  build() {
    Row() {
      Image($r(`app.media.${this.image}`))
    }.layoutWeight(1)
    .backgroundColor(this.color)
    .height(200)
  }
}

在这里插入图片描述

自定义组件抽离成一个单独的文件

@Component
export struct ListWidget { //export
  @State data: number[] = [1, 2, 3]

  build() {
    List({ space: 10 }) {
      ForEach(this.data, (item, key) => {
        ListItem() {
          Text(`${item}`).fontSize(24)
        }.width('100%')
        .backgroundColor('#eee')
        .padding(10)
      }, item => item)
    }.width('100%')
    .height('100%')
  }
}

import {ListWidget} from './widget/ListWidget' //import
@Entry
@Component
struct StackPages {
  list: number[] = [1, 2, 3]
  build() {
    Stack({ alignContent: Alignment.BottomEnd }) {
      ListWidget({data:this.list})
    }
  }

Stack组件

Stack(value?: {alignContent?: Alignment})

参数参数类型描述
alignContentAlignment设置子组件在容器内的对齐方式
@Entry
@Component
struct StackPages {
  @State list: number[] = [1, 2, 3]

  //自定义组件
  @Builder NavWidget(text: string, textSize: number, color: string | number) {
    Row() {
      Text(text).textAlign(TextAlign.Center)
        .width('100%')
        .fontSize(textSize)
        .fontColor(Color.White)
    }.width('100%')
    .backgroundColor(color)
    .padding({ top: 10, bottom: 10 })
  }
 //自定义组件
  @Builder ListWidget(data: Array<number>) {
    List({ space: 10 }) {
      ForEach(data, (item, key) => {
        ListItem() {
          Text(`${item}`).fontSize(24)
        }.width('100%')
        .backgroundColor('#eee')
        .padding(10)
      }, item => item)
    }.width('100%')
    .height('100%')
  }
 //自定义组件
  @Builder ButtonWidget() {
    Button() {
      Text('+').fontColor('#fff').fontSize(40)
    }
    .backgroundColor('#ff45e1fd')
    .width(80)
    .height(80)
    .margin({ right: 10, bottom: 10 })
    .onClick(()=> {
      this.doAdd()
    })
  }

  build() {
    Stack({ alignContent: Alignment.BottomEnd }) {
      Stack({ alignContent: Alignment.TopEnd }) {
        this.ListWidget(this.list)
        this.NavWidget('导航', 26, '#ffeac885')
      }

      this.ButtonWidget()
    }
  }

  //ListWidget是传值进去的，会导致list加入的数据不会进入ListWidget进行显示
  doAdd() {
    this.list.push(this.list[this.list.length-1] + 1);
  }
}

Flex组件

Flex(value?:{direction?:FlexDirection,wrap?:FlexWrap,alignContent?:FlexAlign,justifyContent?:FlexAlign,alignItems?: ItemAlign})
参数

参数名参数类型参数值描述
directionFlexDirectionRow(default),Column,RowReverse,ColumnReverse子组件在Flex容器内的排列方向，即主轴的方向
wrapFlexWrapNoWrap(default),Warp,WrapReverseFlex容器是单行/列还是多行/列
alignContentFlexAlignStart(default),Center,End,SpaceBetween,SpaceAround,SpaceEvenly交叉轴中有额外的空间时，多行内容的对齐格式（仅在wrap为Wrap或WrapReverse时生效）
justifyContentFlexAlignStart(default),Center,End,SpaceBetween,SpaceAround,SpaceEvenly子组件在Flex容器主轴上的对齐格式
alignItemsItemAlignStart(default),Center,End,Baseline,Stretch子组件在Flex容器交叉轴上的对齐格式
import { Header } from './widget/Header';
import {SearchContainer} from './widget/SearchContainer'
@Entry
  @Component
  struct FlexPage {
    @State searchData:string[] = ['计算机','手表','手机','饮料','可口可乐']
    build() {
      Column() {
        Header()
        Text('热搜')
          .fontSize(28)
          .fontColor('#ff505656')
          .margin({left:20})
          .width('100%')
        SearchContainer({data:this.searchData,w:'100%',h:'100%'})//为什么此高度是全屏幕的100%，而不是剩下空间的100%
      }.width('100%')
        .height('100%')
    }
  }
import font from '@ohos.font'
@Component
  export struct Header {
    build() {
      Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceEvenly }) {
        Button() {
          Image($r('app.media.ic_public_back')).width(40).height(40)
        }.backgroundColor(null)

        TextInput({ placeholder: '文本' })
          .placeholderColor('#000')
          .placeholderFont({size:30})
          .fontSize(28)
          .backgroundColor('#eeefff')
          .borderRadius(30)
          .padding(16)
          .width('60%')
        Button() {
          Text('搜索')
            .fontSize(26)
            .fontColor('#000')
        }.backgroundColor(null)
          .width('20%')
      }.width('100%')
        .height(90)
    }
  }

@Component
  export struct SearchContainer {
    data:string[]=['女装','女装','女装','女装']
    w:number|string = '100%'
    h:number|string = '100%'

    build() {
      Flex({direction:FlexDirection.RowReverse,wrap:FlexWrap.WrapReverse,alignContent:FlexAlign.SpaceEvenly}) {
        ForEach(this.data,(item,key)=>{
          Text(`${item}`)
            .fontSize(24)
            .backgroundColor('#ddd')
            .padding(20)
            .borderRadius(20)
            .margin({top:10,right:10})
        })
      }.width(this.w)
        .height(this.h)
        .padding(20)
    }
  }

属性

名称参数类型描述
flexGrownumber设置父容器的剩余空间分配给此属性所在组件的比例，自适应拉伸布局
flexShrinknumber当父容器空间不足时，子组件的压缩比例

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1424379.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

VMware vCenter告警：vSphere UI运行状况警报

VMware vCenter告警：vSphere UI运行状况警报

vSphere UI运行状况警报 不会详细显示告警的具体内容&#xff0c;需要我们自己进一步确认告警原因。 vSphere UI运行状况警报是一种监控工具&#xff0c;用于检测vSphere环境中的潜在问题。当警报触发时&#xff0c;通常表示系统遇到了影响性能或可用性的问题。解决vSphere UI…
阅读更多...
猫头虎博主第10期赠书活动:《写给大家看的Midjourney设计书》

猫头虎博主第10期赠书活动:《写给大家看的Midjourney设计书》

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通Golang》…
阅读更多...
瑞萨RL78G12系列单片机使用IAR软件进行仿真设置及与E2接线

瑞萨RL78G12系列单片机使用IAR软件进行仿真设置及与E2接线

目录 一、单片机与仿真器连接 二、IAR软件在线仿真使用手册 一、单片机与仿真器连接 E1引脚接线图 RL78系列单片机的GND接仿真器的pin2、pin12、pin14 RL78系列单片机的VDD接仿真器的pin8 RL78系列单片机的Tool0接仿真器的pin5 RL78系列单片机的Reset接仿真器的pin10、pin…
阅读更多...
【JavaLearn】#（29）Maven引入、Maven项目类型、Maven安装与配置、Maven项目的创建和使用、pom配置文件介绍

【JavaLearn】#（29）Maven引入、Maven项目类型、Maven安装与配置、Maven项目的创建和使用、pom配置文件介绍

1. Maven引入 1.1 传统方式中项目jar包资源的问题 项目中的jar包资源&#xff08;如JDBC驱动包&#xff09;需要我们自己从网上下载&#xff0c;然后手动导入到项目中使用 –> 一旦jar包资源过多&#xff0c;容易造成遗漏&#xff0c;且不好管理 如果有两个项目&#xff0…
阅读更多...
Android studio protobuf配置

Android studio protobuf配置

第一步&#xff1a; id com.google.protobuf version 0.9.3 apply false 第二步&#xff1a; apply plugin: com.google.protobuf sourceSets {main {proto {srcDir src/main/protos}} }protobuf {protoc {artifact com.google.protobuf:protoc:3.19.2}generateProtoTasks …
阅读更多...
JVM性能分析工具——Arthas及火焰图的使用

JVM性能分析工具——Arthas及火焰图的使用

Arthas的使用 Arthas常用命令Arthas的安装Linux压测工具Apache Bench安装火焰图的使用火焰图如何分析火焰图的互动 Arthas常用命令 help &#xff1a;查看所有命令dashboard &#xff1a;仪表板&#xff0c;查看线程的CPU信息等heapdump &#xff1a;不同类对象占用内存比重&a…
阅读更多...
windows pm2 执行 npm脚本或执行yarn脚本遇到的问题及解决方案

windows pm2 执行 npm脚本或执行yarn脚本遇到的问题及解决方案

环境&#xff1a; 在windows上启动终端来运行一个项目&#xff1b;通过指令npm run start来启动&#xff0c;但是将终端一关&#xff0c;就无法访问了&#xff0c;所以想到用pm2来管理 1. 全局安装pm2 npm i pm2 -g2. 在项目根目录执行指令(大部分兄弟的错误使用方法) pm2 st…
阅读更多...
微服务—Docker

微服务—Docker

目录 初识Docker Docker与虚拟机的区别 镜像与容器 Docker架构 常见Docker命令 镜像命令 容器命令 数据卷挂载 直接挂载 初识Docker 在项目部署的过程中&#xff0c;如果出现大型项目组件较多&#xff0c;运行环境也较为复杂的情况&#xff0c;部署时会碰到一些问题&…
阅读更多...
Linux ---- Shell编程三剑客之AWK

Linux ---- Shell编程三剑客之AWK

一、awk处理文本工具 1、awk概述 awk 是一种处理文本文件的语言&#xff0c;是一个强大的文本分析工具。AWK是专门为文本处理设计的编程语言&#xff0c;也是行处理软件&#xff0c;通常用于扫描、过滤、统计汇总工作。用来处理列。数据可以来自标准输入也可以是管道或文件。…
阅读更多...
EBC金融英国CEO：高波动性周期下，如何寻找市场的稳定性？

EBC金融英国CEO：高波动性周期下，如何寻找市场的稳定性？

利率主导的市场&#xff0c;将在2024年延续。目前&#xff0c;固收市场对于降息的定价&#xff0c;正通过利率传导至不同资产中。尽管市场迫切利用通胀去佐证降息&#xff0c;但各国央行仍囿于通胀目标的政策桎梏。政策和市场预期的博弈将继续牵动市场脉搏&#xff0c;引发价格…
阅读更多...
酷开科技依托酷开系统新剧热播，引领潮流风向

酷开科技依托酷开系统新剧热播，引领潮流风向

随着科技的不断发展&#xff0c;智能电视已经成为了家庭娱乐的主流&#xff0c;是消费者居家休闲放松的好帮手。其中&#xff0c;作为国内智能电视操作系统领军者的酷开系统&#xff0c;一直致力于为消费者提供丰富的内容和贴心的体验。近日&#xff0c;酷开系统新剧热播&#…
阅读更多...
数组常见算法题-评委打分

数组常见算法题-评委打分

签名&#xff1a;但行好事&#xff0c;莫问前程。 文章目录 前言一、计算数组的最大值、最小值、总和、均值二、评委打分总结 前言 学习记录一下数组常见的算法题。 一、计算数组的最大值、最小值、总和、均值 需求&#xff1a;定义一个int型的数组&#xff0c;分别赋予随机两…
阅读更多...
Tensorflow2.0笔记 - where，scatter_nd, meshgrid相关操作

Tensorflow2.0笔记 - where，scatter_nd, meshgrid相关操作

本笔记记录tf.where进行元素位置查找&#xff0c;scatter_nd用于指派元素到tensor的特定位置&#xff0c;meshgrid用作绘图的相关操作。 import tensorflow as tf import numpy as np import matplotlib.pyplot as plttf.__version__#where操作查找元素位置 #输入的tensor是Tr…
阅读更多...
检测头篇 | 原创自研 | YOLOv8 更换 SEResNeXtBottleneck 头 | 附详细结构图

检测头篇 | 原创自研 | YOLOv8 更换 SEResNeXtBottleneck 头 | 附详细结构图

左图：ResNet 的一个模块。右图：复杂度大致相同的 ResNeXt 模块，基数（cardinality）为32。图中的一层表示为（输入通道数，滤波器大小，输出通道数）。 1. 思路 ResNeXt是微软研究院在2017年发表的成果。它的设计灵感来自于经典的ResNet模型，但ResNeXt有个特别之处：它采用…
阅读更多...
springboot 文件差异化对比以及可视化展示

springboot 文件差异化对比以及可视化展示

maven依赖 <!-- 文件内容对比--><dependency><groupId>io.github.java-diff-utils</groupId><artifactId>java-diff-utils</artifactId><version>4.11</version></dependency>创建Diff 工具类 package com.system.ut…
阅读更多...
大路灯和台灯哪个更适合学生?五款适合学生的大路灯分享

大路灯和台灯哪个更适合学生?五款适合学生的大路灯分享

根据国家卫健委在上个月公布的数据&#xff0c;我国儿童青少年总体近视率为52.7%&#xff0c;其中&#xff0c;小学生为35.6%&#xff0c;初中生为71.1%&#xff0c;高中生为80.5%。随着这个数据公布以来&#xff0c;许多家长开始紧张自家孩子的近视问题&#xff0c;不少家长为…
阅读更多...
Vue学习Element-ui

Vue学习Element-ui

声明&#xff1a;本文来源于黑马程序员PDF讲义 Ajax 我们前端页面中的数据&#xff0c;如下图所示的表格中的学生信息&#xff0c;应该来自于后台&#xff0c;那么我们的后台和前端是 互不影响的2个程序&#xff0c;那么我们前端应该如何从后台获取数据呢&#xff1f;因为是2…
阅读更多...
【FAS Survey】《Deep learning for face anti-spoofing: A Survey》

【FAS Survey】《Deep learning for face anti-spoofing: A Survey》

PAMI-2022 最新成果&#xff1a;https://github.com/ZitongYu/DeepFAS 文章目录 1 Introduction & Background1.1 Face Spoofing Attacks1.2 Datasets for Face Anti-Spoofing1.3 Evaluation Metrics1.4 Evaluation Protocols 2 Deep FAS with Commercial RGB Camera2.1 H…
阅读更多...
幻兽帕鲁服务器游戏怎么升级版本？

幻兽帕鲁服务器游戏怎么升级版本？

幻兽帕鲁服务器游戏怎么升级版本&#xff1f;自建幻兽帕鲁服务器进入Palworld游戏提示“您正尝试加入的比赛正在运行不兼容的游戏版本&#xff0c;请尝试升级游戏版本”什么原因&#xff1f;这是由于你的客户端和幻兽帕鲁服务器版本不匹配&#xff0c;如何解决&#xff1f;更新…
阅读更多...
pinctrl/gpio子系统（1）-pinctrl子系统介绍及驱动源码分析

pinctrl/gpio子系统（1）-pinctrl子系统介绍及驱动源码分析

1.简介 在如今的驱动开发工作中&#xff0c;实际上已经很少去对着寄存器手册进行驱动开发了&#xff0c;一般板子拿到手&#xff0c;已经有原厂的驱动开发工程师&#xff0c;在gpio子系统、pinctrl子系统中将自家芯片的引脚适配好了。 我们直接基于设备树已配置好的寄存器值&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023