当前位置： 首页 > article >正文

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

article 2024/10/24 9:44:55

文章目录

  • 布局
    • 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.kler.cn/news/362822.html

相关文章：

  • 生成式人工智能
  • 【Verilog】CRC-24
  • 060_基于python智能旅游系统
  • WebRTC音频 03 - 实时通信框架
  • Java应用程序的测试覆盖率之设计与实现（二）-- jacoco agent
  • eCAP超声波测距-ePWM电机调速
  • 【推导过程】常用连续分布的数学期望、方差、特征函数
  • 031_基于nodejs的旅游推荐网站
  • Vue 的虚拟 DOM
  • 策略模式是一种行为设计模式
  • 基于neo4j知识图谱的菜谱推荐系统
  • OpenAI“草莓”大模型登场！先行者云科技一键体验
  • 驱动-----内核启动
  • C 语言入门教程
  • STM32（二十一）：看门狗
  • VirtualBox虚拟机桥接模式固定ip详解
  • ARM/Linux嵌入式面经（五十）：tp普联
  • HeterGCL 论文写作分析
  • C语言汇编概述
  • R语言机器学习算法实战系列（十）自适应提升分类算法 (Adaptive Boosting)
  • SCR相对标准偏差、氨氮比、截面速度，多平面计算
  • WIFI、NBIOT、4G模块调试AT指令连接华为云物联网服务器（MQTT协议）
  • 基于Java微信小程序的的儿童阅读系统的详细设计和实现(源码+lw+部署文档+讲解等)
  • int argc, char *argv[]
  • Pr 视频效果：时间
  • 刷题 - 图论