【鸿蒙】HarmonyOS NEXT星河入门到实战4-ArkTS界面布局深入

目录

一、布局元素组成

1.1 内边距-padding

1.2 外边距 margin

1.3 实战案例-QQ音乐-登录

1.4 边框 border

 二、设置组件圆角

2.1 基本圆角设置

2.2 特殊形状的圆角设置

三、背景属性

3.1 背景图片-backgroundImage

3.2 背景图片位置-backgroundImagePosition

3.3 背景定位-单位问题vp2px（5.x版本忽略此问题，单位一致了）

3.4 背景尺寸大小-backgroundlmageSize

四、线性布局

4.1 主轴对齐方式

 4.2 综合案例 个人中心-顶部导航

4.3 交叉轴对齐方式

4.4 综合案例-得物列表项

4.4 自定义伸缩-layoutWeight

4.5 综合案例-得物卡片

4.6 综合案例-京东登录

五、弹性布局

5.1 主轴方向、对齐方式、交叉轴对齐方式

5.2 综合案例Flex 换行 -wrap

六、绝对定位 -position和层级zlndex

6.1 绝对定位和层级

6.2 综合案例-人气卡片案例

七、层叠布局

7.1 层叠布局示例

7.2 综合案例-B站-视频卡片

八、阶段综合练习-【支付宝】

---

前言：ArkTS界面布局深入讲解

一、布局元素组成

1.1 内边距-padding

@Entry
@Component
struct Index {
  @State message: string = '春天的菠菜';

  build() {
     Column(){
       Text('王语嫣')
         .backgroundColor(Color.Pink)
         .padding(10)// 四个方向设置相同的内边距
       Text('杨过')
         .backgroundColor(Color.Green)
         .padding({
           left: 20,
           top: 30,
           right: 5,
           bottom: 30
         })//分别设置

    }

  }
}

1.2 外边距 margin

@Entry
@Component
struct Index {
  @State message: string = '春天的菠菜';

  build() {
     Column(){
       Row(){
         Text('刘备')
           .backgroundColor(Color.Orange)
         Text('关羽')
           .backgroundColor(Color.Pink)
           .margin({
             left: 30,
             right: 30
           })
         Text('张飞')
           .backgroundColor(Color.Green)
       }

       Column(){
         Text('刘备')
           .backgroundColor(Color.Orange)
         Text('关羽')
           .backgroundColor(Color.Pink)
           .margin({
             top: 30,
             bottom: 30
           })
         Text('张飞')
           .backgroundColor(Color.Green)
       }


    }

  }
}

1.3 实战案例-QQ音乐-登录

@Entry
@Component
struct Index {
  @State message: string = '春天的菠菜';

  build() {
     Column(){
       Image($r('app.media.m_user'))
         .width('100')
       Text('女子交友俱乐部')
         .fontWeight(700)
         .margin({
           top: 10,
           bottom: 40
         })
       Button('QQ登录')
         .width('100%')
         .margin({
           bottom: 10
         })
       Button('微信登录')
         .width('100%')
         .backgroundColor('#ddd')
         .fontColor('#000')

    }
    .padding(20)
    .width('100%')

  }
}

1.4 边框 border

@Entry
@Component
struct Index {
  @State message: string = '春天的菠菜';

  build() {
     Column(){
       Text('待完善')
         .fontColor(Color.Red)
         .padding(5)
         .border({
           width: 1,  // 宽度（必须）
           color: Color.Red,
           style: BorderStyle.Dashed  // 样式（Dashed   虚线 Solid  实线（默认） Dotted 点线）
         })
         .margin({bottom: 20})

       Text('单边框')
         .padding(5)
         .border({
           width: {left: 1, right: 2},
           color: {left: Color.Blue, right:  Color.Green},
           style: {left: BorderStyle.Dotted, right: BorderStyle.Solid}
         })
    }
    .padding(20)
    // .width('100%')

  }
}

 二、设置组件圆角

2.1 基本圆角设置

import { TextReaderIcon } from '@hms.ai.textReader';

@Entry
@Component
struct Index {
  @State message: string = '春天的菠菜';

  build() {
     Column(){
       Text('没有圆角')
         .width(100)
         .height(60)
         .backgroundColor(Color.Pink)
         .margin({bottom: 30})
       Text('相同圆角')
         .width(100)
         .height(60)
         .backgroundColor(Color.Gray)
         .margin({bottom: 30})
         .borderRadius(15) // 设置相同的圆角
       Text('不同圆角')
         .width(100)
         .height(60)
         .backgroundColor(Color.Green)
         .borderRadius({
           topLeft: 10,
           topRight:2,
           bottomLeft: 20,
           bottomRight: 30
         }) // 设置不同的圆角
    }
    .padding(20)
    // .width('100%')

  }
}

2.2 特殊形状的圆角设置

 

@Entry
@Component
struct Index {
  @State message: string = '春天的菠菜';

  build() {
    Column(){
      // 1 正圆
      Image($r('app.media.cat'))
        .width(100)
        .height(100)
        .borderRadius(50)
        .margin({bottom: 5})
      // 2 胶囊按钮
      Text('胶囊按钮效果与文本长有关')
        .height(50)
        .borderRadius(25)  //高的一半
        .backgroundColor(Color.Pink)
        .padding(10)
    }
    .padding(20)
    // .width('100%')

  }
}

三、背景属性

3.1 背景图片-backgroundImage

 

@Entry
@Component
struct Index {
  @State message: string = '春天的菠菜';

  build() {
    Column(){
      Text('中山大道')
        .fontColor(Color.White)
        .width(200)
        .height(100)
        .backgroundColor(Color.Pink)
        .backgroundImage($r('app.media.flower'))
        .margin({bottom: 5})


      Text('背景图片平铺图')
        .fontColor(Color.White)
        .width(200)
        .height(200)
        .backgroundColor(Color.Pink)
        .backgroundImage($r('app.media.flower'),ImageRepeat.XY) // xy水平与垂直平铺 
    }
    .padding(20)
    // .width('100%')

  }
}

3.2 背景图片位置-backgroundImagePosition

@Entry
@Component
struct Index {
  @State message: string = '春天的菠菜';

  build() {
    Column(){
      Text()       
        .width(300)
        .height(200)
        .backgroundColor(Color.Pink)
        .backgroundImage($r('app.media.flower'))
        .backgroundImagePosition({x: 50, y: 50}) // 坐标方式
        .margin({bottom: 5})
      Text()
        .fontColor(Color.White)
        .width(300)
        .height(200)
        .backgroundColor(Color.Pink)
        .backgroundImage($r('app.media.flower'))
        .backgroundImagePosition(Alignment.Center)// 方式二 枚举
    }
    .padding(20)
    // .width('100%')

  }
}

3.3 背景定位-单位问题vp2px（5.x版本忽略此问题，单位一致了）

@Entry
@Component
struct Index {
  @State message: string = '春天的菠菜';

  build() {
    Column(){
      Text()
        .width(300)
        .height(200)
        .backgroundColor(Color.Pink)
        .backgroundImage($r('app.media.flower'))
        .backgroundImagePosition({
          x:  vp2px(150), //新版5.X 直接150
          y: vp2px(100), //新版5.X 直接100
        })

    }
    .padding(20)
    // .width('100%')

  }
}

使用5.X版本，发现花不见了，原来新版本单位已经一致了，无需vp2px

3.4 背景尺寸大小-backgroundlmageSize

@Entry
@Component
struct Index {
  @State message: string = '春天的菠菜';
  build() {
    Column(){
      Text()
        .width(300)
        .height(200)
        .backgroundColor(Color.Green)
        .backgroundImage($r('app.media.jd_bj3'))
        .backgroundImagePosition(Alignment.Center)
        .backgroundImageSize(ImageSize.Cover)  //ImageSize.Contain
        // .backgroundImageSize({
        //   width:300,
        //   height: 200
        // })

    }
    .padding(20)
    // .width('100%')
  }
}