HarmonyOS4.0 ArkUI构建布局

一、线性布局

在这里插入图片描述

属性说明:

  • justifyContent:设置子元素在主轴方向的对齐方式
    • 参数:FlexAlign枚举
  • alignItems:设置子元素在交叉轴方向的对齐方式
    • 参数:
      • Row容器使用VerticalAlign枚举
      • Column容器使用HorizontalAlign枚举

1、Column布局

1.1、FlexAlign

在这里插入图片描述

1.2、HorizontalAlign

在这里插入图片描述

1.3、代码示例

在这里插入图片描述

@Entry
@Component
struct ColumnUI {
  build() {

    // space:设置内容间隔
    Column({ space: 50 }) {
      Text("文本内容一")
      Text("文本内容二")
      Text("文本内容三")
      Text("文本内容四")
    }
    .borderColor("red")
    .width("100%")
    .height("100%")
    .borderWidth(2)
    .backgroundColor("green")
    // 主轴方向的对齐方式
    .justifyContent(FlexAlign.Center)
    // 交叉轴方向的对齐方式
    .alignItems(HorizontalAlign.Center)

  }
}

2、Row布局

2.1、FlexAlign

在这里插入图片描述

2.2、VerticalAlign

在这里插入图片描述

2.3、代码示例

在这里插入图片描述

@Entry
@Component
struct RowUI {

  build() {
    Row() {
      Text("文本内容一")
      Text("文本内容二")
    }
    .height('100%')
    .width("100%")
    .borderWidth(2)
    .borderColor("red")
    .backgroundColor("green")
    .justifyContent(FlexAlign.Center)
    .alignItems(VerticalAlign.Top)
  }
}

3、需求

在这里插入图片描述

二、列表布局

List是一种复杂布局,具备以下特点:

① 列表项(ListItem)数量过多超出屏幕后,会自动提供滚动功能

② 列表项(ListItem)既可以纵向排列,也可以横向排列

语法:

List({space:3}){
    ListItem(){
        Text("列表项")
    }
    
     ListItem(){
        Text("列表项")
    }
}
class Shops{
  name:string
  img:ResourceStr
  price:number
  status:number

  constructor(name:string,img:ResourceStr,price:number,status:number) {
    this.name = name
    this.img = img
    this.price = price
    this.status = status
  }
}
@Entry
@Component
struct ListUi {

  private shops:Array<Shops> = [
    new Shops("华为mate70旗舰手机",$r("app.media.down"),8999,500),
    new Shops("华为mate70旗舰手机",$r("app.media.down"),9999,200),
    new Shops("华为mate70旗舰手机",$r("app.media.down"),10999,0),
    new Shops("华为mate70旗舰手机",$r("app.media.down"),10999,0),
    new Shops("华为mate70旗舰手机",$r("app.media.down"),10999,0),
    new Shops("华为mate70旗舰手机",$r("app.media.down"),10999,0),
    new Shops("华为mate70旗舰手机",$r("app.media.down"),10999,0),
    new Shops("华为mate70旗舰手机",$r("app.media.down"),10999,0),
    new Shops("华为mate70旗舰手机",$r("app.media.down"),10999,0),
    new Shops("华为mate70旗舰手机",$r("app.media.down"),10999,0)
  ]

  build() {




    Column(){
      Row(){
        Text("商品列表")
          .fontSize(30)
      }
      .width("90%")
      .height("60")

      List(){
        ForEach(this.shops,(item:Shops) =>{
          ListItem(){
            Row(){
              Image(item.img)
                .width(100)

              Column({space:4}){

                if (item.status) {
                  Text(item.name)
                    .fontWeight(FontWeight.Bold)
                  Text("原价:¥"+item.price)
                    .fontColor("#c7c7c7")
                    .decoration({type:TextDecorationType.LineThrough})
                    .fontSize(14)
                  Text("折扣价:¥"+(item.price - item.status))
                    .fontColor("red")
                  Text("补贴:¥"+item.status)
                    .fontColor("red")
                } else{
                  Text(item.name)
                    .fontWeight(FontWeight.Bold)
                  Text("¥"+item.price)
                    .fontColor("red")
                }
              }
              .alignItems(HorizontalAlign.Start)
            }
            .width("90%")
            .backgroundColor("#ffffff")
            .height("15%")
            .borderRadius(8)
            .margin({bottom:10})
          }

        })
      }
    }
    .width("100%")
    .height("100%")
    .backgroundColor("#c7c7c7")
  }
}

15%")
.borderRadius(8)
.margin({bottom:10})
}

    })
  }
}
.width("100%")
.height("100%")
.backgroundColor("#c7c7c7")

}
}


![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/f8c5053c44c945c3afbe643c9842f877.png#pic_center)

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

k8s的ca以及相关证书签发流程

k8s的ca以及相关证书签发流程 1. kube-apiserver相关证书说明2. 生成CA凭证1.1. 生成CA私钥1.2. 生成CA证书 2. 生成kube-apiserver凭证2.1. 生成kube-apiserver私钥2.2. 生成kube-apiserver证书请求2.3. 生成kube-apiserver证书 3. 疑问和思考4. 参考文档 对于网站类的应用&am…

springboot 整合 mybatis(配置版)

代码及配置整合 创建实体类,与数据库对应 创建 mapper、service 和 controller @AutowiredUserService userService;@ResponseBody@GetMapping("/user")public com.vazquez.bootstudy.model.User getById(@RequestParam("id") Long id) {return userServ…

计算机网络:数据链路层 - CSMA/CD协议

计算机网络&#xff1a;数据链路层 - CSMA/CD协议 媒体接入控制CSMA/CD协议截断二进制指数退避算法帧长与帧间间隔信道利用率 媒体接入控制 如图所示&#xff0c;这是一根同轴电缆&#xff0c;有多台主机连接到这根同轴电缆上&#xff0c;他们共享这根传输媒体&#xff0c;形成…

LeetCode-347. 前 K 个高频元素【数组 哈希表 分治 桶排序 计数 快速选择 排序 堆(优先队列)】

LeetCode-347. 前 K 个高频元素【数组 哈希表 分治 桶排序 计数 快速选择 排序 堆&#xff08;优先队列&#xff09;】 题目描述&#xff1a;解题思路一&#xff1a;哈希表记录出现次数&#xff0c;然后用最小堆取&#xff0c;因为每次都是弹出最小的&#xff0c;剩下的一定是K…

CentOS7安装MySQL8.0教程

环境介绍 操作系统&#xff1a;Centos7.6 MySQL版本&#xff1a; 8.0.27 只要是8.0.*版本&#xff0c;那就可以按照本文说明安装 一、安装前准备 1、卸载MariaDB 安装MySQL的话会和MariaDB的文件冲突&#xff0c;所以需要先卸载掉MariaDB。 1.1、查看是否安装mariadb rpm -…

SQL注入利用学习-Union联合注入

联合注入的原理 在SQL语句中查询数据时&#xff0c;使用select 相关语句与where 条件子句筛选符合条件的记录。 select * from person where id 1; #在person表中&#xff0c;筛选出id1的记录如果该id1 中的1 是用户可以控制输入的部分时&#xff0c;就有可能存在SQL注入漏洞…

自媒体内容创作助手:7款必备ai写作工具一览! #学习方法#科技#其他

这些工具不仅可以快速生成高质量的文本内容&#xff0c;还可以根据用户的需求进行个性化定制。它们可以帮助我们节省大量的时间和精力&#xff0c;让我们更加专注于创意和细节的打磨。本文将为大家详细介绍几个AI写作工具&#xff0c;让你在写作领域更上一层楼。 1.七燕写作 这…

【随笔】Git 高级篇 -- 撤销变更 reset | revert(十四)

&#x1f48c; 所属专栏&#xff1a;【Git】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f496; 欢迎大…

uniapp项目问题及解决(前后端互联)

1.路由跳转的问题 uni.navigateTo&#xff08;&#xff09; 保留当前页面&#xff0c;跳转到应用内的某个页面&#xff0c;使用uni.navigateBack可以返回到原页面 uni.redirectTo&#xff08;&#xff09; 关闭当前页面&#xff0c;跳转到应用内的某个页面。 uni.reLaunch&…

探索未来产业:新技术、新商业、新趋势

引言 随着科技的迅速发展和全球经济的不断变化&#xff0c;未来产业已经成为全球关注的焦点之一。未来产业的兴起不仅代表着新的商业机遇&#xff0c;更是对传统产业模式的颠覆和重构。在这个充满挑战和机遇的时代&#xff0c;我们不得不认真思考未来产业的重要性和前景。 未…

STM32之HAL开发——FatFs文件系统移植

FatFs文件系统移植 FatFs 程序结构图 移植 FatFs 之前我们先通过 FatFs 的程序结构图了解 FatFs 在程序中的关系网络 用户应用程序需要由用户编写&#xff0c;想实现什么功能就编写什么的程序&#xff0c;一般我们只用到 f_mount()、f_open()、 f_write()、f_read() 就可以…

在【Cencos7】中安装【Nacos】并适配【PostgreSQL】数据库

在【Cencos7】中安装【Nacos-2.3.0】并适配【PostgreSQL】数据库 安装JDK wget命令下载&#xff1a; wget https://repo.huaweicloud.com/java/jdk/8u151-b12/jdk-8u151-linux-x64.tar.gz解压 tar -xzvf jdk-7u80-linux-x64.tar.gz将解压后的目录移动到/opt下 sudo mv jdk…

unity_Button:单击的三种实现方式

1.针对特定单个按钮 此代码直接绑定到button上面无需其他操作 using UnityEngine; using UnityEngine.UI;public class PrintHelloOnButtonClick : MonoBehaviour {private Button button;void Start(){// 获取当前GameObject上的Button组件button GetComponent<Button&g…

【Redis系列】Spring Boot 集成 Redis 实现缓存功能

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

[C语言]——动态内存管理

目录 一.为什么要有动态内存分配 二.malloc和free 1.malloc 2.free 三.calloc和realloc 1.calloc 2.realloc 3.空间的释放​编辑 四.常见的动态内存的错误 1.对NULL指针的解引用操作 2.对动态开辟空间的越界访问 3.对非动态开辟内存使用free释放 4.使用free释放⼀块…

嘉轩智能工业科技诚邀您参观2024第13届生物发酵展

参展企业介绍 自2005年成立以来&#xff0c;嘉轩一直致力于工业智能永磁滚筒的研发、制造及销售&#xff0c;具有十多年的从业经验&#xff0c;公司主营产品包括工业智能永磁滚筒、机电智能诊断、工业智能电机等&#xff0c;高效智能自驱动永磁滚筒为我公司目前主导产品&#x…

【C++】——list的介绍及使用 模拟实现

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 文章目录 前言 一、list的介绍及使用 1.1 list的介绍 1.2 list的使用 1.2.1 list的构造 1.2.2 list iterator的使用 1.2.3 list capacity 1.2.4 list element access 1.…

CSS导读 (Emmet语法)

&#xff08;大家好&#xff0c;今天我们将继续来学习CSS的相关知识&#xff0c;大家可以在评论区进行互动答疑哦~加油&#xff01;&#x1f495;&#xff09; 目录 续&#xff1a;七、Chrome调试工具 一、Emmet语法 1.1 快速生成HTML结构语法 1.2 快速生成CSS样式语法 &…

从概念到实践:揭开枚举与联合体在数字化创新时代的神秘面纱

欢迎来到白刘的领域 Miracle_86.-CSDN博客 系列专栏 C语言知识 先赞后看&#xff0c;已成习惯 创作不易&#xff0c;多多支持&#xff01; 在编程的世界中&#xff0c;枚举和联合体是两种非常基础且重要的数据结构。它们各自具有独特的特点和用途&#xff0c;为程序员提供…

【人工智能】AI赋能城市交通 未来城市的驱动力

前言 随着城市化进程的不断加速&#xff0c;交通拥堵、环境污染等问题日益凸显&#xff0c;人们对交通系统的效率和可持续性提出了更高的要求。在这样的背景下&#xff0c;智能交通技术正成为改善城市交通的重要驱动力。本文将探讨智能交通技术在解决城市交通挑战方面的应用和未…