鸿蒙HarmonyOS NEXT 5.0开发（2）—— ArkUI布局组件

news2024/11/28 20:41:01

文章目录

  • 布局
    • Column：从上往下的布局
    • Row：从左往右的布局
    • Stack：堆叠布局
    • Flex：自动换行或列
  • 组件
    • Swiper
    • 各种选择组件

  • 华为官方教程
  • B站视频教程

布局

主轴和交叉轴的概念：

  • 对于Column布局而言，主轴是垂直方向，交叉轴是水平方向
  • 对于Row布局而言，主轴是水平方向，交叉轴是垂直方向
    在这里插入图片描述

Column：从上往下的布局

在这里插入图片描述

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

  build() {
    /*
    column：从上往下的布局
    {space:5}对应每个组件有.margin({top:5})
    * 对齐问题：
    *   主轴：从上往下的方向
    *   交叉轴：横向的为交叉轴
     */
    Column({space: 5}) {
      Text("你好，鸿蒙Next")
        // 组件的基础属性，宽度、高度、边框设置
        .width(150)
        .height(50)
        .border({
          width:1,
          color: 'red'
        })
      Text("你好，鸿蒙Next")
        .width(150)
        .height(50)
        .border({
          width:1,
          color: 'red'
        })
      Text("你好，鸿蒙Next")
        .width(150)
        .height(50)
        .border({
          width:1,
          color: 'red'
        })
    }
    .width(300)
    .height(500)
    .border({color: 'green', width:2})
    // 设置交叉轴方向的对齐：Start、Center、End
    .alignItems(HorizontalAlign.Start)
    // 设置主轴方向的对齐：Start、End、Center、SpaceBetween、SpaceAround、SpaceEvenly
    .justifyContent(FlexAlign.SpaceEvenly)
  }
}

在这里插入图片描述

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

  build() {
    /*
    用column实现登陆界面
     */
    Column({space:15}) {
      Image($r('app.media.startIcon'))
        .width(150)
      TextInput({placeholder: '请输入账号: '})
      TextInput({placeholder: '请输入密码: '})
        .type(InputType.Password)
      Button('登陆')
      	// 写函数去实现交互
        .onClick(()=>{
          // 创建一个对象，可以用字面量来写，需要该进成接口或类
          let obj: User = {
              name: "",
              pwd: ''
          }
          let user: UserInfo | null = null
          AlertDialog.show({ message: JSON.stringify(user) })
        })
        .width('100%')
      Row() {
        Text('忘记密码？')
        Blank(30)
        Text('注册')
      }
    }
    .height('100%')
    .width('100%')
    .padding(20)
  }
}


interface User {
  name: string
  pwd: string
}


class UserInfo {
  name: string = ''
  pwd: string = ''

  // constructor(name: string, pwd: string) {
  //   this.name = name;
  //   this.pwd = pwd;
  // }
}

Row：从左往右的布局

在这里插入图片描述

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

  build() {
    Column() {
      /*
    Row()：行布局，从左往右的布局
    * 主轴：水平方向（justifyContent）
    * 交叉轴：垂直方向（alignItems）
     */
      Row({space:5}) {
        Text('用户名：')
          .width(70)
          .height(60)
        TextInput({
          placeholder: '请输入用户名：'
        })
          .width(150)
          .height(50)
      }
      .width('100%')
      .justifyContent(FlexAlign.Center)
      .alignItems(VerticalAlign.Top)

      Row({space:5}) {
        Text('手机号：')
          .width(70)
          .height(60)
        TextInput({
          placeholder: '请输入手机号码：'
        })
          .width(150)
          .height(50)
      }
      .width('100%')
      // 主轴对齐：Start、Center、End、SpaceBetween、SpaceAround、SpaceEvenly
      .justifyContent(FlexAlign.Center)
      // 交叉轴对齐：Top、Center、Bottom
      .alignItems(VerticalAlign.Top)
    }
    .height('100%')
    .width('100%')
  }
}
  • 融合示例
    在这里插入图片描述
@Entry
@Component
struct Layouts {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column({space: 5}) {
        Text('GucciT恤')
        Text('价格美丽，上身快乐')
      }
      .justifyContent(FlexAlign.Start)
      .alignItems(HorizontalAlign.Start)
      .padding(20)

      Row() {
        Image($r('app.media.startIcon'))
          .width(50)
        Image($r('app.media.top_diversion_entrance'))
          .width(50)
      }

    }
    .height(70)
    .width('100%')
    .border({color: '#cccccc', width: 2})
    .justifyContent(FlexAlign.SpaceBetween)
    .backgroundColor('#eeeeee')
  }
}

Stack：堆叠布局

层叠布局的居中设置
在这里插入图片描述
在这里插入图片描述

@Entry
@Component
struct Layouts {
  @State message: string = '层叠布局';

  build() {
   /*
   Stack()：层叠布局
   * 可以重叠放置多个
    */
    Stack({alignContent: Alignment.Center}) {
      Text('1')
        .width(400)
        .height(400)
        .backgroundColor(Color.Green)
        // 层级关系设置的属性
        .zIndex(3)

      Text('2')
        .width(300)
        .height(300)
        .backgroundColor(Color.Blue)
        .zIndex(10)

      Text('3')
        .width(200)
        .height(200)
        .backgroundColor(Color.Pink)
        .zIndex(199)
    }
    .height('100%')
    .width('100%')
  }
}
  • 页面跳转
    在这里插入图片描述
import { router } from '@kit.ArkUI';

@Entry
@Component
struct Layouts {
  @State message: string = '层叠布局';
  // 定时器执行总时间：@State 变量状态会同步更新
  @State time: number = 5
  // 定时器句柄
  timer: number = -1
  // 页面显示之前执行
  aboutToAppear(): void {
    this.timer = setInterval(()=>{
      if (this.time <= 0) {
        clearInterval(this.timer)
        // 路由功能：倒计时结束后跳转到另一个界面
        router.replaceUrl({
          url: 'pages/SignPage'
        })
      }
      this.time--
    }, 1000)
  }

  aboutToDisappear(): void {
    //清除定时器
    clearInterval(this.timer)
  }

  build() {
   /*
   Stack()：层叠布局
   * 可以重叠放置多个
    */
    Stack({alignContent: Alignment.TopEnd}) {
      Image($r('app.media.startIcon'))

      Button('跳过'+ this.time)
        .backgroundColor('#ccc')
        .fontColor('#fff')
    }
    .height('100%')
    .width('100%')
  }
}

Flex：自动换行或列

  • 弹性布局的基础设置
    在这里插入图片描述
    在这里插入图片描述
import { router } from '@kit.ArkUI';

@Entry
@Component
struct Layouts {

  build() {
   /*
   Flex()：弹性布局
   * 也存在主轴和交叉轴的概念，根据direction来决定，默认是Row()行布局
    */
    Flex({
      direction: FlexDirection.Row,
      justifyContent: FlexAlign.SpaceBetween,
      alignItems: ItemAlign.Start
    }) {
      Text('1').width(60).backgroundColor(Color.Yellow)
      Text('2').width(60).backgroundColor(Color.Pink)
      Text('3').width(60).backgroundColor(Color.Green)
    }
    .height('100%')
    .width('100%')
  }
}

在这里插入图片描述

import { router } from '@kit.ArkUI';

@Entry
@Component
struct Layouts {

  build() {
   /*
   Flex()：弹性布局
   * 也存在主轴和交叉轴的概念，根据direction来决定，默认是Row()行布局
   * 优势：可通过wrap去自动换行
    */
    Flex({
      direction: FlexDirection.Row,
      wrap: FlexWrap.Wrap
    }) {
      Text('C++').width(60).backgroundColor('#ccc').margin(10).padding(15)
      Text('Java').width(60).backgroundColor('#ccc').margin(10).padding(15)
      Text('Python').width(60).backgroundColor('#ccc').margin(10).padding(15)
      Text('大数据').width(60).backgroundColor('#ccc').margin(10).padding(15)
      Text('Hadoop').width(60).backgroundColor('#ccc').margin(10).padding(15)
      Text('人工智能').width(60).backgroundColor('#ccc').margin(10).padding(15)
    }
    .height('100%')
    .width('100%')
  }
}

组件

Swiper

@Entry
@Component
struct Layouts {

  swipCtl: SwiperController = new SwiperController()

  build() {
   Column() {
     Swiper(this.swipCtl) {
       Image($r('app.media.layered_image'))
       Image($r('app.media.layered_image'))
       Image($r('app.media.layered_image'))
       Image($r('app.media.layered_image'))
     }
     .loop(true)
     .autoPlay(true)
     .interval(300)

     Row() {
       Button('<').onClick(()=>{
         this.swipCtl.showPrevious()
       })

       Button('>').onClick(()=>{
         this.swipCtl.showNext()
       })
     }
   }
  }
}

各种选择组件

在这里插入图片描述

import { router } from '@kit.ArkUI';

@Entry
@Component
struct Layouts {

  @State message: string = '用户注册'

  addList: SelectOption[] = [{value:'长沙'}, {value:'广州'}, {value:'上海'}, {value:'北京'}]

  build() {
    Column() {
      Text(this.message)
        .id('RegUserPageHelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)

      Divider().width('100%').vertical(false).height(5).color(Color.Green)

      // 单选组件
      Row({space:20}) {
        Text('性别:').fontSize(10).fontWeight(FontWeight.Medium)
        Radio({value: 'male', group: 'sexGroup'})
          .checked(true)
          .width(20)
          .height(20)
        Text('男')
        Radio({value: 'female', group: 'sexGroup'})
          .checked(true)
          .width(20)
          .height(20)
        Text('女')
      }

      // 下拉选择框
      Row({space: 20}) {
        Text('地址').fontSize(20).fontWeight(FontWeight.Medium)
        Select(this.addList)
          .width('80%')
          .selected(2)
          .value('请选择地址')
          .fontColor('#182431')
          .onSelect((index, value)=>{
            console.log('ken', index, value)
          })
      }

      // 复选框
      Row({space: 20}) {
        Text('爱好:').fontSize(20).fontWeight(FontWeight.Medium)
        Checkbox({name: 'chkSing', group: "loveGroup"})
        Text('唱歌').fontSize(14).fontColor('#182431').fontWeight(500)
        Checkbox({name: 'chkDance', group: "loveGroup"}).onChange((value)=>{
          //
        })
        Text('跳舞').fontSize(14).fontColor('#182431').fontWeight(500)
      }

      // 日期选择框
      Row({space: 20}) {
        Text('生日:').fontSize(20).fontWeight(FontWeight.Medium)
        DatePicker({start: new Date()})
          .height(60)
          .width('50%')
          .onDateChange((value) => {
            //
          })
      }
    }
    .width('100%')
    .height('100%')
  }
}
  • 更多组件和布局参考官方文档：UI开发（ArkUI）

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

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

相关文章

cnn做整图匹配

cnn做整图匹配

好像还没有人把cnn在工业机器视觉中使用&#xff0c;我们打破界限&#xff0c;试一试&#xff01; 工业上有很多需求&#xff0c;判断加工产品有还是没有&#xff0c;从前基本上都是使用找斑的方法来判断。 我们可以用cnn代替试试&#xff01; 我们前头cnn最好成绩是&#x…
阅读更多...
STM32（二十一）：看门狗

STM32（二十一）：看门狗

WDG&#xff08;Watchdog&#xff09;看门狗&#xff0c;手动重装寄存器的操作就是喂狗。 看门狗可以监控程序的运行状态&#xff0c;当程序因为设计漏洞、硬件故障、电磁干扰等原因&#xff0c;出现卡死或跑飞现象时&#xff0c;看门狗能及时复位程序&#xff0c;避免程序陷入…
阅读更多...
免费送源码：Node.JS+Express+MySQL Express 流浪动物救助系统 计算机毕业设计原创定制

免费送源码：Node.JS+Express+MySQL Express 流浪动物救助系统 计算机毕业设计原创定制

摘 要 随着互联网大趋势的到来&#xff0c;社会的方方面面&#xff0c;各行各业都在考虑利用互联网作为媒介将自己的信息更及时有效地推广出去&#xff0c;而其中最好的方式就是建立网络管理系统&#xff0c;并对其进行信息管理。由于现在网络的发达&#xff0c;流浪动物救助系…
阅读更多...
python基础综合案例（数据可视化—折线图可视化）

python基础综合案例（数据可视化—折线图可视化）

可视化案例的学习目标&#xff1a; 通过案例&#xff0c;回忆巩固python基础的语法 锻炼编程能力&#xff0c;熟练语法的使用 1.json数据格式 两种不同的语言由于数据格式不同&#xff0c;所以没有办法直接沟通&#xff0c;就比如我们可以将python 的数据格式转成json&…
阅读更多...
VirtualBox虚拟机桥接模式固定ip详解

VirtualBox虚拟机桥接模式固定ip详解

VirtualBox虚拟机桥接模式固定ip详解 VirtualBox 桥接设置Ubuntu 24.04使用固定IP问题记录 VirtualBox 桥接设置 为什么设置桥接模式&#xff1f;桥接模式可以实现物理机和虚拟机互相通信&#xff0c;虚拟机也可以访问互联网&#xff08;推荐万金油&#xff09;&#xff0c;物…
阅读更多...
STM32通信协议-I2C

STM32通信协议-I2C

目录 一&#xff0c;IC2的协议规则 I2C总线是PHILIPS公司开发的两线式串行总线&#xff0c;I2C总线主要解决了单片机一对多通信的问题 两根通信线&#xff1a;SCL,SDA&#xff0c;同步&#xff0c;半双工通信&#xff0c;支持数据应答机制&#xff0c;支持总线挂载多设备。 …
阅读更多...
Verilog：参数(parameter)的使用

Verilog：参数(parameter)的使用

相关阅读 Verilog基础https://blog.csdn.net/weixin_45791458/category_12263729.html?spm1001.2014.3001.5482 参数(parameter)一般用于定义常数&#xff0c;常用于进行可配置的参数化设计中&#xff0c;本文将对参数的使用进行详细介绍。 首先来看看参数的BNF范式&#xff…
阅读更多...
Hadoop 安装教程——单节点模式和分布式模式配置

Hadoop 安装教程——单节点模式和分布式模式配置

文章目录 一、预备知识1.1 Hadoop 发行版本1.2 部署方式 二、预备条件2.1 环境准备2.2 创建新用户(可选)2.3 配置 SSH 无密码登录2.4 下载 Hadoop2.5 编辑 hadoop-env.sh 脚本2.6 编辑 dfs 和 yarn 脚本 三、单节点模式部署3.1 官方使用案例3.2 查看运行结果 四、伪分布模式部署…
阅读更多...
用哪种建站程序做谷歌SEO更容易？

用哪种建站程序做谷歌SEO更容易？

做网站很容易&#xff0c;但做一个能带来流量和订单的网站就没那么简单了。尤其是在谷歌SEO优化方面&#xff0c;不同的建站程序对SEO的支持程度也不同。在这方面&#xff0c;WordPress和Shopify无疑是最佳选择。 WordPress作为一个内容管理系统&#xff08;CMS&#xff09;&am…
阅读更多...
关键词提取技术：TF-IDF 详解

关键词提取技术：TF-IDF 详解

1. 什么是TF-IDF&#xff1f; TF-IDF&#xff08;Term Frequency-Inverse Document Frequency&#xff09; 是一种统计方法&#xff0c;用于评估单词在文档集或语料库中的重要性。它是自然语言处理和信息检索中的核心技术之一。 TF-IDF主要基于以下两个概念&#xff1a; TF&a…
阅读更多...
Java毕业设计 基于SSM jsp餐厅卫生安全系统

Java毕业设计 基于SSM jsp餐厅卫生安全系统

Java毕业设计 基于SSM jsp餐厅卫生安全系统 这篇博文将介绍一个基于SSM框架和jsp开发的餐厅卫生安全系统&#xff0c;适合用于Java毕业设计。 功能介绍 餐厅人员: 注册 登录 首页 图片轮播　窗口信息　窗口详情　文明窗口　差评窗口　系统公告 个人中心 管理员&#xff1a;…
阅读更多...
亚信安全DeepSecurity中标知名寿险机构云主机安全项目

亚信安全DeepSecurity中标知名寿险机构云主机安全项目

近日&#xff0c;亚信安全DeepSecurity成功中标国内知名寿险机构的云主机安全项目。亚信安全凭借在云主机安全防护领域的突出技术优势&#xff0c;结合安全运营的能力&#xff0c;以“实战化”为指导&#xff0c;为用户提供无惧威胁攻击、无忧安全运营的一站式云安全体系&#…
阅读更多...
Anaconda和Pycharm超详细安装教程（2024版本+Win11）

Anaconda和Pycharm超详细安装教程（2024版本+Win11）

一、安装Anaconda 1.1 下载Anaconda 在官方网站（Free Download | Anaconda）上下载适用于你的操作系统的 Anaconda 安装包。（这里以windows为例） 1.2 安装Anaconda 打开下载的安装包，并按照安装向导的指示进行安装。在安装过程中，你可以选择默认的安装选项，也可以根据…
阅读更多...
Visual Studio安装图文详解教程

Visual Studio安装图文详解教程

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl 教程说明 本教程旨在详细介绍 Visual Studio 社区版的安装过程及其注意事项。 Visual Studio简介 Visual Studio 社区版功能完备且可扩展的免费 IDE&#xff0c;可用于创…
阅读更多...
NVR接入录像回放平台EasyCVR视频融合平台语音对讲配置

NVR接入录像回放平台EasyCVR视频融合平台语音对讲配置

国标GB28181视频平台EasyCVR视频融合平台可拓展性强、视频能力灵活&#xff0c;平台可提供视频监控直播、云端录像、云存储、录像检索与回看、智能告警、平台级联、云台控制、语音对讲、智能分析接入等功能。其中&#xff0c;在语音对讲方面&#xff0c;NVR接入录像回放平台目前…
阅读更多...
4种鼓励创业创新的方法

4种鼓励创业创新的方法

随着市场趋于饱和&#xff0c;许多企业&#xff0c;尤其是初创企业&#xff0c;很难在竞争中保持领先地位。技术为企业彻底改变其营销和管理策略铺平了道路。另一个经过实践检验的成功渗透特定市场的方法是在办公室内部激发创新&#xff0c;从员工到品牌皆如此。 那么究竟如何…
阅读更多...
【设计模式-原型】

【设计模式-原型】

**原型模式&#xff08;Prototype Pattern&#xff09;**是一种创建型设计模式&#xff0c;旨在通过复制现有对象的方式来创建新对象&#xff0c;而不是通过实例化类来创建对象。该模式允许对象通过克隆&#xff08;复制&#xff09;来创建新的实例&#xff0c;因此避免了重新创…
阅读更多...
LabVIEW提高开发效率技巧----插入式架构

LabVIEW提高开发效率技巧----插入式架构

随着LabVIEW项目规模的扩大和系统复杂性的增加&#xff0c;传统的单一代码架构难以应对后期维护和功能扩展的需求。插入式架构&#xff08;Plug-In Architecture&#xff09;作为一种模块化设计方式&#xff0c;通过动态加载和运行子VI&#xff0c;使系统功能更加灵活、模块化&…
阅读更多...
Oracle OCP认证考试考点详解082系列01

Oracle OCP认证考试考点详解082系列01

题记&#xff1a; 本篇博文是Oracle OCP认证考试考点详解082系列的第一篇&#xff0c;本系列主要讲解Oracle OCP认证考试考点&#xff08;题目&#xff09;&#xff0c;适用于19C/21C,跟着学OCP考试必过。 1. 第一题&#xff1a; 1. 题目 2. 解析及答案 关于Oracle数据库中节…
阅读更多...
6.1 特征值介绍

6.1 特征值介绍

一、特征值和特征向量介绍 本章会开启线性代数的新内容。前面的第一部分是关于 A x b A\boldsymbol x\boldsymbol b Axb&#xff1a;平衡、均衡和稳定状态&#xff1b;现在的第二部分是关于变化的。时间会加入进来 —— 连续时间的微分方程 d u / d t A u \pmb{\textrm{d}…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023