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

最新推荐文章于 2024-09-25 08:19:24 发布
最新推荐文章于 2024-09-25 08:19:24 发布
阅读量1.8k 收藏 10
点赞数 12
分类专栏： HarmonyOS 文章标签： harmonyos 华为
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/legend818/article/details/141961030
版权

目录

一、布局元素组成

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

四、线性布局

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

鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：CheckboxGroup）
m0_64420071的博客
03-07 1198
ArkTS声明式开发（基础手势：CheckboxGroup）
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程2
05-16
《全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战》是一套针对初学者精心设计的鸿蒙操作系统开发教程。本教程旨在帮助没有编程基础的学员快速掌握HarmonyOS的开发技能，通过丰富的实例和清晰的讲解，...
HarmonyOS ArkTS 构建布局
帅次的博客
03-18 2524
一、线性布局（Row、Column） 二、层叠布局（StackLayout） 三、弹性布局（Flex） 四、相对布局(RelativeContainer) 五、列表 (List) 六、网格布局 (Grid) 七、轮播 (Swiper)
HarmonyOS Next(纯血鸿蒙)它到底像谁
09-25 5319
后续再也没有写关于鸿蒙的文章。没错，我确实入坑了鸿蒙，并且成功上架了几款App和元服务，虽然当前的用户量还比较少，但鸿蒙开发的整体流程已然蹚了一遍，是时候来做一些总结了。本篇从应用开发的角度聊聊鸿蒙它像谁？它有哪些不一样的特征？开发者怎么快速入门？
HarmonyOS Next开发学习手册——弹性布局 (Flex)
maniuT的博客
06-28 1376
弹性布局（ Flex ）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。常用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等。容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸，在交叉轴方向的尺寸称为交叉轴尺寸。图1主轴为水平方向的Flex容器示意图。
OpenHarmony开发实战：弹性布局（ArkTS）
shudaoshanQAQ的博客
04-07 1120
本篇是基于Flex容器组件，实现弹性布局效果。
【鸿蒙实战开发】鸿蒙next版开发基础布局
HarmonyOS_001的博客
07-01 1837
今日核心：1.设计资源-图标库2.属性：布局属性、背景属性3.线性布局。
全网首发鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程
02-11
### 全网首发鸿蒙 HarmonyOS NEXT星河版零基础入门到实战教程解析 #### 一、鸿蒙开发环境准备与工具下载 本教程旨在帮助初学者从零开始学习鸿蒙 HarmonyOS NEXT 星河版的开发技术。首先，我们需要准备开发环境。...
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程1
05-16
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程1
黑马HarmonyOS-NEXT星河版实战-课程网盘链接提取码下载 .txt
06-03
"黑马HarmonyOS-NEXT星河版实战"课程旨在帮助学员深入了解HarmonyOS-NEXT星河版操作系统的开发和实际应用。学员将学习操作系统原理、应用开发技巧和界面设计，通过实战项目提升技能。课程注重实践与理论相结合，为...
鸿蒙HarmonyOS NEXT星河版入门到实战视频.zip
最新发布
11-07
00-鸿蒙开发环境准备.mp4 01-环境备选方案-API10-开发工具下载.mp4 02-ArkTS-基础快速入门.mp4 03-ArkTS-认识和存储数据.mp4 04-ArkTS-常量和变量的命名规则.mp4 05-ArkTS-数组.mp4 06-ArkTS-函数的基本使用.mp4 07-...
【HarmonyOS(ArkTS)学习笔记-4】了解开发布局
weixin_62984531的博客
10-31 882
【HarmonyOS(ArkTS)学习笔记-4】了解开发布局
【学习笔记】鸿蒙UI开发-布局（ArkTs）
程序员四海
12-18 4489
主要内容： 1、UI开发的相关知识和注意事项。 2、实际开发的代码示例及链接。 3、ArkTs语言的相关组件的使用与注意事项。
HarmonyOS开发之ArkTS使用—系统布局构建登陆页面
m0_64422261的博客
06-04 776
UI布局是前端技术基础技能，给入门的演示下一些基本用法，提供个简单示例，上述示例主要是UI控件(图片，文本，按钮，输入框)，和Row/Column布局的组合使用。
OpenHarmony开发实战：常用组件与布局（ArkTS）
shudaoshanQAQ的博客
04-07 1772
在本篇文章中，您将通过一个简单的购物社交应用示例，学习如何使用常用的基础组件和容器组件。
OpenHarmony开发实战：ArkUI常用布局容器对齐方式（ArkTS）
shudaoshanQAQ的博客
04-07 2573
基于ArkTS扩展的声明式开发范式，实现Flex、Column、Row和Stack四种常用布局容器对齐方式。
ArkTS开发系列之UI布局用法的学习认识（2.2.2下）
jay_chess的博客
06-16 632
【代码】ArkTS开发系列之UI布局用法的学习认识（2.2.2下）
鸿蒙开发HarmonyOS NEXT （三） 熟悉ArkTs （上）
m0_61472704的博客
07-04 809
鸿蒙专栏地址：https://blog.csdn.net/m0_61472704/category_12711032.html
鸿蒙HarmonyOS NEXT开发：动态属性设置（ArkTS通用属性）
shudaoshanBBQ的博客
08-10 1296
动态设置组件的属性，支持开发者在属性设置时使用if/else语法，且根据需要使用多态样式设置属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

春天的菠菜

你的鼓励是我的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值