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

@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%')
  }
}

四、线性布局

4.1 主轴对齐方式

@Entry
@Component
struct Index {
  @State message: string = '春天的菠菜';
  build() {
    Column(){ 
      Text()
        .width(200)
        .height(100)
        .backgroundColor(Color.Green)
        .border({width: 2})
      Text()
        .width(200)
        .height(100)
        .backgroundColor(Color.Green)
        .border({width: 2})
        .margin(5)
      Text()
        .width(200)
        .height(100)
        .backgroundColor(Color.Green)
        .border({width: 2})

    }

    .width('100%')
    .height('100%')
    .backgroundColor('#ccc')
  //   设置排布主方向的对齐方式（主轴） ctrl + p
  //   Row()方法类似 这里省略
    .justifyContent(FlexAlign.SpaceAround)
  }
}

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

import window from '@ohos.window';
@Entry
@Component
struct Index {
  @State message: string = '春天的菠菜';

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Column(){
      Row(){
        Image($r('app.media.ic_arrow_left'))
          .width(30)
        Text('个人中心')
        Image($r('app.media.ic_more'))
          .width(24)
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .width('100%')
      .height(40)
      .backgroundColor(Color.White)
      .padding({left: 10,right: 10})

    }

    .width('100%')
    .height('100%')
    .backgroundColor('#ccc')

  }
}

4.3 交叉轴对齐方式

import window from '@ohos.window';
@Entry
@Component
struct Index {
  @State message: string = '春天的菠菜';

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Column(){
      Text()
        .width(200)
        .height(100)
        .backgroundColor(Color.Green)
        .border({width: 2})
      Text()
        .width(200)
        .height(100)
        .backgroundColor(Color.Green)
        .border({width: 2})
        .margin({top: 5,bottom: 5})
      Text()
        .width(200)
        .height(100)
        .backgroundColor(Color.Green)
        .border({width: 2})

    }

    .width('100%')
    .height('100%')
    .backgroundColor('#ccc')
    .alignItems(HorizontalAlign.Start)  // Row的交叉轴 垂直对齐方式  VerticalAlign.End 
  }
}

4.4 综合案例-得物列表项

import window from '@ohos.window';
@Entry
@Component
struct Index {
  @State message: string = '春天的菠菜';

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Column(){
      Row(){
        // 左侧列
        Column({ space: 8 }){
          Text('玩一玩')
            .fontSize(18)
            .fontWeight(700)
          Text('签到兑礼 | 超多大奖 超好玩')
            .fontSize(12)
            .fontColor('#999')
        }
        .alignItems(HorizontalAlign.Start) // 交叉轴对齐方式
        // 右侧列
        Row({ space: 8 }){
          Image($r('app.media.tree'))
            .width(50)
            .backgroundColor('#efefef')
            .borderRadius(5)
          Image($r('app.media.ic_arrow_right'))
            .width(20)
            .fillColor('#999')
        }
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .padding({left: 15,right:15})
      .width('100%')
      .height(80)
      .backgroundColor('#fff')
      .borderRadius(5)
    }
    .padding(10)
    .width('100%')
    .height('100%')
    .backgroundColor('#ccc')

  }
}

4.4 自定义伸缩-layoutWeight

import window from '@ohos.window';
@Entry
@Component
struct Index {
  @State message: string = '春天的菠菜';

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Column(){
    // LayoutWeight
      Row(){
      //   左侧
        Text('左侧')
          .layoutWeight(1)
          .backgroundColor(Color.Green)
          .height(40)

      //   右侧
        Text('右侧固定')
          .width(80)
          .height(40)
          .backgroundColor(Color.Orange)
      }
      .width(300)
      .height(40)
      .backgroundColor('#fff')

      // LayoutWeight 多个对象
      Row(){
        //   老大
        Text('老大')
          .layoutWeight(1)
          .backgroundColor(Color.Green)
          .height(40)
        //   老二
        Text('老二')
          .layoutWeight(2)
          .width(80)
          .height(40)
          .backgroundColor(Color.Pink)
        //   老三
        Text('老三')
          .width(80)
          .height(40)
          .backgroundColor(Color.Orange)
      }
      .width(300)
      .height(40)
      .backgroundColor('#fff')
      .margin({top: 30})

    }
    .padding(10)
    .width('100%')
    .height('100%')
    .backgroundColor('#ccc')

  }
}

4.5 综合案例-得物卡片

import window from '@ohos.window';
@Entry
@Component
struct Index {
  @State message: string = '春天的菠菜';

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Column(){
      Column(){
        Image($r('app.media.nick'))
          .width('100%')
          .borderRadius({topLeft: 5, topRight: 5})
        Text('今晚吃这个 | 每日艺术分享 No. 43')
          .fontWeight(600)
          .fontSize(14)
          .lineHeight(22)
          .height(60)
      //   底部
        Row(){
          //  底部左侧
          Row({space: 5}){
            Image($r('app.media.user'))
              .height(16)
              .borderRadius(8)
            Text('插画师分享聚集地')
              .fontSize(10)
              .fontColor('#999')

          }
          .layoutWeight(1)
          //底部右侧
          Row({space: 5}){
            Image($r('app.media.ic_like'))
              .width(12)
              .fillColor('#999')
            Text('2300')
              .fontSize(10)
              .fontColor('#666')
          }

        }
        .padding({left: 15,right: 15})

      }
      .width(200)
      .padding({bottom: 15})
      // .height(400) // 设计时先固定高，设计完成去掉
      .backgroundColor(Color.White)
      .borderRadius(5)


    }
    .padding(10)
    .width('100%')
    .height('100%')
    .backgroundColor('#ccc')

  }
}

4.6 综合案例-京东登录

import window from '@ohos.window';
@Entry
@Component
struct Index {
  @State message: string = '春天的菠菜';

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Column(){
    //   顶部区域
      Row(){
        Image($r('app.media.jd_cancel'))
          .width(20)
        Text('帮助')
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)

    //   Logo
      Image($r('app.media.jd_logo'))
        .width(250)
        .height(250)
   // 国家地址区域
      Row(){
        Text('国家/地址')
          .layoutWeight(1)
          .fontColor('#666')
        Text('中国(+86)')
          .margin({right: 5})
          .fontColor('#666')
        Image($r('app.media.jd_right'))
          .width(20)
          .fillColor('#666')

      }
      .width('100%')
      .height(40)
      .backgroundColor('#fff')
      .borderRadius(20)
      .padding({left: 15, right:10})

    //   手机号（输入框）
      TextInput({
        placeholder: '请输入手机号'
      })
        .height(40)
        .borderRadius(20)
        .backgroundColor('#fff')
        .margin({top: 20})
        .placeholderColor('#666')

    //   已阅读并同意
      Row(){
        Checkbox()
          .width(10)
          .margin({top: 7})
        // 一段文本中，有文本样式需要单独定制，TEXT 包括SPAN
        Text(){
          Span('我已阅读并同意')
          Span('《京东隐私政策》').fontColor('#3274f6')
          Span('《京东用户服务协议》').fontColor('#3274f6')
          Span('未注册的手机号将自动创建京东账号')
        }
        .fontSize(12)
        .fontColor('#666')
        .lineHeight(20)

      }
      .alignItems(VerticalAlign.Top)
      .margin({top: 20})

    //  登录
      Button('登录')
        .width('100%')
        .backgroundColor('#bf2838')
        .margin({top: 25})

    //   新用户注册等
      Row({ space: 25 }){
        Text('新用户注册').fontSize(14).foregroundColor('#666')
        Text('账户密码登录').fontSize(14).foregroundColor('#666')
        Text('无法登录').fontSize(14).foregroundColor('#666')
      }
      .margin({top: 15})
      // 填充组件Black() 作用 填充空白区域
      Blank()
      // 底部其他登录方式
      Column(){
        Text('其他登录方式')
          .fontColor('#666')
          .height(22)
          .fontSize(14)
          .margin({bottom: 28})
        Row(){
          Image($r('app.media.jd_huawei')).width(34)
          Image($r('app.media.jd_wechat')).width(34).fillColor('#56a44a')
          Image($r('app.media.jd_weibo')).width(34).fillColor('#c8493b')
          Image($r('app.media.jd_QQ')).width(34).fillColor('#4ba0e8')

        }
        .width('100%')
        .margin({bottom: 30})
        .justifyContent(FlexAlign.SpaceAround)

      }
      .width('100%')
      // .backgroundColor(Color.Pink)

    }
    .padding(20)
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Pink)
    .backgroundImage($r('app.media.jd_login_bg'))
    .backgroundImageSize(ImageSize.Cover)

  }
}

五、弹性布局

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

import window from '@ohos.window';
@Entry
@Component
struct Index {
  @State message: string = '春天的菠菜';

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    // Flex默认是主轴，水平往右，交叉轴是垂直往下 （跟我们Row相似）
    // 1、 主轴方向
    // direction: FlexDirection.Column  / Row   // 改变主轴方向 {direction: FlexDirection.Column} 改成垂直往下
    // 2、 主轴对齐方式
    // justifyContent: FlexAlign.SpaceAround
    // 3、交叉轴对齐方式
    // alignItems: ItemAlign.End

    Flex({direction: FlexDirection.Row,
      justifyContent: FlexAlign.SpaceAround,
      alignItems: ItemAlign.End

    }){

      Text()
        .width(80).height(80)
        .backgroundColor(Color.Pink)
        .border({width: 1, color: Color.Blue})
      Text()
        .width(80).height(80)
        .backgroundColor(Color.Pink)
        .border({width: 1, color: Color.Blue})
      Text()
        .width(80).height(80)
        .backgroundColor(Color.Pink)
        .border({width: 1, color: Color.Blue})
    }
    .width('100%').height(600)
    .backgroundColor('#5f9a5c')



  }
}

5.2 综合案例Flex 换行 -wrap

import window from '@ohos.window';
@Entry
@Component
struct Index {
  @State message: string = '春天的菠菜';

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Column(){
      Text('阶段选择')
        .fontSize(30)
        .fontWeight(700)
        .padding(15)
        .width('100%')
      Flex({
        wrap: FlexWrap.Wrap
      }){
        Text('ArkUI').margin(5).padding(10).backgroundColor('#f1f1f1')
        Text('ArkTS').margin(5).padding(10).backgroundColor('#f1f1f1')
        Text('界面开发').margin(5).padding(10).backgroundColor('#f1f1f1')
        Text('系统能力').margin(5).padding(10).backgroundColor('#f1f1f1')
        Text('权限控制').margin(5).padding(10).backgroundColor('#f1f1f1')
        Text('元服务').margin(5).padding(10).backgroundColor('#f1f1f1')
      }
    }

  }
}

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

6.1 绝对定位和层级

import window from '@ohos.window';
@Entry
@Component
struct Index {
  @State message: string = '春天的菠菜';

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Column(){
      Text('张三').width(80).height(80).backgroundColor(Color.Green)
      Text('李四').width(80).height(80).backgroundColor(Color.Yellow)
        .position({ //绝对定位
          x: 50,
          y: 50
        })
        .zIndex(1) //层级
      Text('王二').width(80).height(80).backgroundColor(Color.Orange)

    }
   .width(300).height(300)
    .backgroundColor(Color.Pink)
  }
}

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

import window from '@ohos.window';
@Entry
@Component
struct Index {
  @State message: string = '春天的菠菜';

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Column(){
    // 先整体 再局部 再细节
      Column(){
        // 定位 的VIP
        Text('VIP')
          .position({
            x: 0,
            y: 0
          })
          .zIndex(666)
          .width(40).height(20)
          .backgroundColor('#e49642')
          .borderRadius({
            topLeft: 10,
            bottomRight: 10
          })
          .border({width: 2,color: '#fbe7a3'})
          .fontColor('#fbe7a3')
          .fontStyle(FontStyle.Italic)
          .fontSize(14).fontWeight(700)
          .textAlign(TextAlign.Center) // 文本对齐方式  或者使用 .padding({left: 5})


        // 上图
        Image($r('app.media.position_moco'))
          .width('100%').height(210)
          .borderRadius(10)

      //   下row 图+文本
        Row(){
          Image($r('app.media.position_earphone'))
            .width(20)
            .backgroundColor('#55b7f4')
            .borderRadius(10)
            .padding(3)
            .fillColor(Color.White)
            .margin({left: 6, right: 6})
          Text('飞狗MOCO')
            .fontWeight(700)

        }
        .width('100%').height(30)
        // .backgroundColor(Color.Orange)


      }
      .width(160).height(240)
      .backgroundColor(Color.White)

    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Pink)
  }
}

七、层叠布局

7.1 层叠布局示例

import window from '@ohos.window';
@Entry
@Component
struct Index {
  @State message: string = '春天的菠菜';

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    // 层叠布局
    Stack({
      alignContent: Alignment.Bottom  // 改变位置
    }){
      Text('刘备')
        .width(250).height(250)
        .backgroundColor(Color.Pink)
      Text('关羽')
        .width(150).height(150)
        .backgroundColor(Color.Orange)
      Text('张飞')
        .width(50).height(50)
        .backgroundColor(Color.Yellow)


    }
    .width(300).height(600)
    .backgroundColor(Color.Green)

  }
}

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

import window from '@ohos.window';
@Entry
@Component
struct Index {
  @State message: string = '春天的菠菜';

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {

    Column(){
      Column(){
        //  上面图片区域（层叠使用）
        Stack({alignContent: Alignment.Bottom }){
          Image($r('app.media.bz_img'))
            .borderRadius({
              topLeft: 10,
              topRight:10
            })
          Row(){
            Row({space: 5}){
              Image($r('app.media.bz_play'))
                .width(14)
                .fillColor(Color.White)
              Text('288万')
                .fontSize(12)
                .fontColor(Color.White)
            }
            .margin({right: 10})
            Row({space: 5}){
              Image($r('app.media.bz_msg'))
                .width(14)
                .fillColor(Color.White)
              Text('8655')
                .fontSize(12)
                .fontColor(Color.White)
            }
            Blank()
            Text('4:33')
              .fontSize(12)
              .fontColor(Color.White)


          }
          .width('100%').height(24)
          .padding({left: 5, right: 5})
          // .backgroundColor(Color.Orange)

        }
        .width('100%').height(125)
        Column(){
          Text('【凤凰传奇新歌】 还原来到国风统治区：唢呐一响神曲《铁衣》，歌声送到了海内外')
            .fontSize(13)
            .lineHeight(16)
            .textOverflow({overflow:TextOverflow.Ellipsis})
            .maxLines(2)
          Row(){
            Text('19万点赞')
              .fontSize(10)
              .fontColor('#e66c43')
              .backgroundColor('#faf0ef')
              .padding(5)
              .borderRadius(2)
            Image($r('app.media.bz_more'))
              .width(14)
          }
          .margin({top: 6})
          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween)
        }
        .padding(5)


      }
      .width(200).height(200)
      .backgroundColor(Color.White)
      .borderRadius(10)
      .margin({top: 10})



    }
    .width('100%').height('100%')
    .backgroundColor('#ccc')

  }
}

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

import window from '@ohos.window';
@Entry
@Component
struct Index {
  @State message: string = '春天的菠菜';

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Stack({ alignContent: Alignment.Bottom }){
    //   2 主体展示区
      Stack({alignContent: Alignment.Top}){
      //   2.1 头部
        Row(){
          // 左边
          Column(){
            Text('北京').fontSize(18).fontColor('#fff')
            Text('晴 2℃').fontSize(12).fontColor('#fff')
            Image($r('app.media.zfb_head_down'))
              .position({
                x: 40,
                y: 0
              })
              .width(12).fillColor('#fff')
          }

        //   中间
          Row(){
            Image($r('app.media.zfb_head_search'))
              .width(20)
              .fillColor('#666')
              .margin({left: 5, right: 5})
            Text('北京交通一卡通')
              .layoutWeight(1)
            Text('搜索')
              .width(55)
              .fontColor('#5b73de')
              .fontWeight(700)
              .textAlign(TextAlign.Center)
              .border({
                width: {left: 1},
                color: '#ccc'
              })


          }
          .height(32)
          .layoutWeight(1)
          .backgroundColor(Color.White)
          .borderRadius(5)
          .margin({left: 25, right: 12})

        //   右边
          Image($r('app.media.zfb_head_plus'))
            .width(30)
            .fillColor('#fff')

        }
        .width('100%').height(60)
        .backgroundColor('#5b73de')
        .zIndex(666)
        .padding({left: 10,right: 10})

      //   2.2 主体页面
     Scroll(){
       Column(){
         // TOP快捷按钮区域
        Row(){
          Column(){
            Image($r('app.media.zfb_top_scan'))
              .width(36)
              .fillColor('#fff')
            Text('扫一扫')
              .fontColor('#fff')
          }
          .layoutWeight(1)


          Column(){
            Image($r('app.media.zfb_top_pay'))
              .width(36)
              .fillColor('#fff')
            Text('收付款')
              .fontColor('#fff')
          }
          .layoutWeight(1)

          Column(){
            Image($r('app.media.zfb_top_travel'))
              .width(36)
              .fillColor('#fff')
            Text('出行')
              .fontColor('#fff')
          }
          .layoutWeight(1)


          Column(){
            Image($r('app.media.zfb_top_card'))
              .width(36)
              .fillColor('#fff')
            Text('卡包')
              .fontColor('#fff')
          }
          .layoutWeight(1)

        }
         .backgroundColor('#5b73de')
         .padding({top:5, bottom: 15})

       //   主体区 （背景色#f6f6f6
         Column(){
         //  导航区
           Column({space: 10}){
             Row(){
               Column(){
                 Image($r('app.media.zfb_nav1'))
                   .width(28).margin({bottom: 8})
                 Text('滴滴出行')
                   .fontSize(12).fontColor('#666')

               }
               .layoutWeight(1)

               Column(){
                 Image($r('app.media.zfb_nav2'))
                   .width(28).margin({bottom: 8})
                 Text('生活缴费')
                   .fontSize(12).fontColor('#666')

               }
               .layoutWeight(1)

               Column(){
                 Image($r('app.media.zfb_nav3'))
                   .width(28).margin({bottom: 8})
                 Text('股票')
                   .fontSize(12).fontColor('#666')
               }
               .layoutWeight(1)

               Column(){
                 Image($r('app.media.zfb_nav4'))
                   .width(28).margin({bottom: 8})
                 Text('蚂蚁森林')
                   .fontSize(12).fontColor('#666')
               }
               .layoutWeight(1)

               Column(){
                 Image($r('app.media.zfb_nav5'))
                   .width(28).margin({bottom: 8})
                 Text('手机充值')
                   .fontSize(12).fontColor('#666')
               }
               .layoutWeight(1)

             }
             Row(){
               Column(){
                 Image($r('app.media.zfb_nav6'))
                   .width(28).margin({bottom: 8})
                 Text('余额宝')
                   .fontSize(12).fontColor('#666')

               }
               .layoutWeight(1)

               Column(){
                 Image($r('app.media.zfb_nav7'))
                   .width(28).margin({bottom: 8})
                 Text('花呗')
                   .fontSize(12).fontColor('#666')

               }
               .layoutWeight(1)

               Column(){
                 Image($r('app.media.zfb_nav8'))
                   .width(28).margin({bottom: 8})
                 Text('飞猪旅行')
                   .fontSize(12).fontColor('#666')
               }
               .layoutWeight(1)

               Column(){
                 Image($r('app.media.zfb_nav9'))
                   .width(28).margin({bottom: 8})
                 Text('淘票票')
                   .fontSize(12).fontColor('#666')
               }
               .layoutWeight(1)

               Column(){
                 Image($r('app.media.zfb_nav10'))
                   .width(28).margin({bottom: 8})
                 Text('饿了么')
                   .fontSize(12).fontColor('#666')
               }
               .layoutWeight(1)

             }
             Row(){
               Column(){
                 Image($r('app.media.zfb_nav11'))
                   .width(28).margin({bottom: 8})
                 Text('读书听书')
                   .fontSize(12).fontColor('#666')
               }
               .layoutWeight(1)

               Column(){
                 Image($r('app.media.zfb_nav12'))
                   .width(28).margin({bottom: 8})
                 Text('基金')
                   .fontSize(12).fontColor('#666')
               }
               .layoutWeight(1)

               Column(){
                 Image($r('app.media.zfb_nav13'))
                   .width(28).margin({bottom: 8})
                 Text('直播广场')
                   .fontSize(12).fontColor('#666')
               }
               .layoutWeight(1)

               Column(){
                 Image($r('app.media.zfb_nav14'))
                   .width(28).margin({bottom: 8})
                 Text('医疗健康')
                   .fontSize(12).fontColor('#666')
               }
               .layoutWeight(1)

               Column(){
                 Image($r('app.media.zfb_nav15_more'))
                   .width(28).margin({bottom: 8})
                 Text('更多')
                   .fontSize(12).fontColor('#666')
               }
               .layoutWeight(1)

             }
           }
           .padding(10)

         //   产品区
           Row({space: 5}){
             Image($r('app.media.zfb_pro_pic1'))
               .layoutWeight(1)
             Image($r('app.media.zfb_pro_pic2'))
               .layoutWeight(1)
             Image($r('app.media.zfb_pro_pic3'))
               .layoutWeight(1)
           }
           .padding(10)

           Column({space: 10}){
             Image($r('app.media.zfb_pro_list1'))
               .width('100%')
             Image($r('app.media.zfb_pro_list2'))
               .width('100%')
           }
           .padding(10)


         }
         // .height(1000)
         .width('100%')
         .backgroundColor('#fff')
         .borderRadius({
           topLeft: 20,
           topRight: 20

         })



       }
       .width('100%')
       .padding({top: 60,bottom: 60})
     }



      }
      .width('100%').height('100%')



    //   1 底部Tab导航区
      Row(){
        Column(){
          Image($r('app.media.zfb_tab_home'))
            .width(35)

        }
        .layoutWeight(1)

        Column(){
          Image($r('app.media.zfb_tab_money'))
            .width(28)
            .margin({bottom: 2})
          Text('理财')
            .fontSize(12)

        }
        .layoutWeight(1)

        Column(){
          Image($r('app.media.zfb_tab_life'))
            .width(28)
            .margin({bottom: 2})
          Text('生活')
            .fontSize(12)

        }
        .layoutWeight(1)

        Column(){
          Image($r('app.media.zfb_tab_chat'))
            .width(28)
            .margin({bottom: 2})
          Text('消息')
            .fontSize(12)

        }
        .layoutWeight(1)

        Column(){
          Image($r('app.media.zfb_tab_me'))
            .width(28)
            .margin({bottom: 2})
          Text('我的')
            .fontSize(12)

        }
        .layoutWeight(1)

      }
      .width('100%').height(60)
      .backgroundColor('#fbfcfe')


    }
    .width('100%').height('100%')
    .backgroundColor('#5b73de')
  }
}

标签：ArkTS,Color,Text,app,星河,NEXT,width,backgroundColor,height
From： https://blog.csdn.net/legend818/article/details/141961030

【鸿蒙】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站-视频卡片

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

相关文章

赞助商

阅读排行

【鸿蒙】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站-视频卡片

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

相关文章

赞助商

阅读排行

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