IT评测·应用市场-qidao123.com

标题: 【鸿蒙】HarmonyOS NEXT星河入门到实战4-ArkTS界面布局深入 [打印本页]
作者: 篮之新喜    时间: 2024-9-11 15:32
标题: 【鸿蒙】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


  1. @Entry
  2. @Component
  3. struct Index {
  4.   @State message: string = '春天的菠菜';
  6.   build() {
  7.      Column(){
  8.        Text('王语嫣')
  9.          .backgroundColor(Color.Pink)
  10.          .padding(10)// 四个方向设置相同的内边距
  11.        Text('杨过')
  12.          .backgroundColor(Color.Green)
  13.          .padding({
  14.            left: 20,
  15.            top: 30,
  16.            right: 5,
  17.            bottom: 30
  18.          })//分别设置
  20.     }
  22.   }
  23. }
复制代码

1.2 外边距 margin


  1. @Entry
  2. @Component
  3. struct Index {
  4.   @State message: string = '春天的菠菜';
  6.   build() {
  7.      Column(){
  8.        Row(){
  9.          Text('刘备')
  10.            .backgroundColor(Color.Orange)
  11.          Text('关羽')
  12.            .backgroundColor(Color.Pink)
  13.            .margin({
  14.              left: 30,
  15.              right: 30
  16.            })
  17.          Text('张飞')
  18.            .backgroundColor(Color.Green)
  19.        }
  21.        Column(){
  22.          Text('刘备')
  23.            .backgroundColor(Color.Orange)
  24.          Text('关羽')
  25.            .backgroundColor(Color.Pink)
  26.            .margin({
  27.              top: 30,
  28.              bottom: 30
  29.            })
  30.          Text('张飞')
  31.            .backgroundColor(Color.Green)
  32.        }
  35.     }
  37.   }
  38. }
复制代码

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


  1. @Entry
  2. @Component
  3. struct Index {
  4.   @State message: string = '春天的菠菜';
  6.   build() {
  7.      Column(){
  8.        Image($r('app.media.m_user'))
  9.          .width('100')
  10.        Text('女子交友俱乐部')
  11.          .fontWeight(700)
  12.          .margin({
  13.            top: 10,
  14.            bottom: 40
  15.          })
  16.        Button('QQ登录')
  17.          .width('100%')
  18.          .margin({
  19.            bottom: 10
  20.          })
  21.        Button('微信登录')
  22.          .width('100%')
  23.          .backgroundColor('#ddd')
  24.          .fontColor('#000')
  26.     }
  27.     .padding(20)
  28.     .width('100%')
  30.   }
  31. }
复制代码

1.4 边框 border


  1. @Entry
  2. @Component
  3. struct Index {
  4.   @State message: string = '春天的菠菜';
  6.   build() {
  7.      Column(){
  8.        Text('待完善')
  9.          .fontColor(Color.Red)
  10.          .padding(5)
  11.          .border({
  12.            width: 1,  // 宽度（必须）
  13.            color: Color.Red,
  14.            style: BorderStyle.Dashed  // 样式（Dashed   虚线 Solid  实线（默认） Dotted 点线）
  15.          })
  16.          .margin({bottom: 20})
  18.        Text('单边框')
  19.          .padding(5)
  20.          .border({
  21.            width: {left: 1, right: 2},
  22.            color: {left: Color.Blue, right:  Color.Green},
  23.            style: {left: BorderStyle.Dotted, right: BorderStyle.Solid}
  24.          })
  25.     }
  26.     .padding(20)
  27.     // .width('100%')
  29.   }
  30. }
复制代码

 二、设置组件圆角

2.1 基本圆角设置


  1. import { TextReaderIcon } from '@hms.ai.textReader';
  3. @Entry
  4. @Component
  5. struct Index {
  6.   @State message: string = '春天的菠菜';
  8.   build() {
  9.      Column(){
  10.        Text('没有圆角')
  11.          .width(100)
  12.          .height(60)
  13.          .backgroundColor(Color.Pink)
  14.          .margin({bottom: 30})
  15.        Text('相同圆角')
  16.          .width(100)
  17.          .height(60)
  18.          .backgroundColor(Color.Gray)
  19.          .margin({bottom: 30})
  20.          .borderRadius(15) // 设置相同的圆角
  21.        Text('不同圆角')
  22.          .width(100)
  23.          .height(60)
  24.          .backgroundColor(Color.Green)
  25.          .borderRadius({
  26.            topLeft: 10,
  27.            topRight:2,
  28.            bottomLeft: 20,
  29.            bottomRight: 30
  30.          }) // 设置不同的圆角
  31.     }
  32.     .padding(20)
  33.     // .width('100%')
  35.   }
  36. }
复制代码

2.2 特殊外形的圆角设置

 


  1. @Entry
  2. @Component
  3. struct Index {
  4.   @State message: string = '春天的菠菜';
  6.   build() {
  7.     Column(){
  8.       // 1 正圆
  9.       Image($r('app.media.cat'))
  10.         .width(100)
  11.         .height(100)
  12.         .borderRadius(50)
  13.         .margin({bottom: 5})
  14.       // 2 胶囊按钮
  15.       Text('胶囊按钮效果与文本长有关')
  16.         .height(50)
  17.         .borderRadius(25)  //高的一半
  18.         .backgroundColor(Color.Pink)
  19.         .padding(10)
  20.     }
  21.     .padding(20)
  22.     // .width('100%')
  24.   }
  25. }
复制代码

三、配景属性


3.1 配景图片-backgroundImage


 

  1. @Entry
  2. @Component
  3. struct Index {
  4.   @State message: string = '春天的菠菜';
  6.   build() {
  7.     Column(){
  8.       Text('中山大道')
  9.         .fontColor(Color.White)
  10.         .width(200)
  11.         .height(100)
  12.         .backgroundColor(Color.Pink)
  13.         .backgroundImage($r('app.media.flower'))
  14.         .margin({bottom: 5})
  17.       Text('背景图片平铺图')
  18.         .fontColor(Color.White)
  19.         .width(200)
  20.         .height(200)
  21.         .backgroundColor(Color.Pink)
  22.         .backgroundImage($r('app.media.flower'),ImageRepeat.XY) // xy水平与垂直平铺
  23.     }
  24.     .padding(20)
  25.     // .width('100%')
  27.   }
  28. }
复制代码

3.2 配景图片位置-backgroundImagePosition



  1. @Entry
  2. @Component
  3. struct Index {
  4.   @State message: string = '春天的菠菜';
  6.   build() {
  7.     Column(){
  8.       Text()      
  9.         .width(300)
  10.         .height(200)
  11.         .backgroundColor(Color.Pink)
  12.         .backgroundImage($r('app.media.flower'))
  13.         .backgroundImagePosition({x: 50, y: 50}) // 坐标方式
  14.         .margin({bottom: 5})
  15.       Text()
  16.         .fontColor(Color.White)
  17.         .width(300)
  18.         .height(200)
  19.         .backgroundColor(Color.Pink)
  20.         .backgroundImage($r('app.media.flower'))
  21.         .backgroundImagePosition(Alignment.Center)// 方式二 枚举
  22.     }
  23.     .padding(20)
  24.     // .width('100%')
  26.   }
  27. }
复制代码

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


  1. @Entry
  2. @Component
  3. struct Index {
  4.   @State message: string = '春天的菠菜';
  6.   build() {
  7.     Column(){
  8.       Text()
  9.         .width(300)
  10.         .height(200)
  11.         .backgroundColor(Color.Pink)
  12.         .backgroundImage($r('app.media.flower'))
  13.         .backgroundImagePosition({
  14.           x:  vp2px(150), //新版5.X 直接150
  15.           y: vp2px(100), //新版5.X 直接100
  16.         })
  18.     }
  19.     .padding(20)
  20.     // .width('100%')
  22.   }
  23. }
复制代码
利用5.X版本，发现花不见了，原来新版本单位已经一致了，无需vp2px

3.4 配景尺寸大小-backgroundlmageSize


  1. @Entry
  2. @Component
  3. struct Index {
  4.   @State message: string = '春天的菠菜';
  5.   build() {
  6.     Column(){
  7.       Text()
  8.         .width(300)
  9.         .height(200)
  10.         .backgroundColor(Color.Green)
  11.         .backgroundImage($r('app.media.jd_bj3'))
  12.         .backgroundImagePosition(Alignment.Center)
  13.         .backgroundImageSize(ImageSize.Cover)  //ImageSize.Contain
  14.         // .backgroundImageSize({
  15.         //   width:300,
  16.         //   height: 200
  17.         // })
  19.     }
  20.     .padding(20)
  21.     // .width('100%')
  22.   }
  23. }
复制代码

四、线性布局


4.1 主轴对齐方式



  1. @Entry
  2. @Component
  3. struct Index {
  4.   @State message: string = '春天的菠菜';
  5.   build() {
  6.     Column(){
  7.       Text()
  8.         .width(200)
  9.         .height(100)
  10.         .backgroundColor(Color.Green)
  11.         .border({width: 2})
  12.       Text()
  13.         .width(200)
  14.         .height(100)
  15.         .backgroundColor(Color.Green)
  16.         .border({width: 2})
  17.         .margin(5)
  18.       Text()
  19.         .width(200)
  20.         .height(100)
  21.         .backgroundColor(Color.Green)
  22.         .border({width: 2})
  24.     }
  26.     .width('100%')
  27.     .height('100%')
  28.     .backgroundColor('#ccc')
  29.   //   设置排布主方向的对齐方式（主轴） ctrl + p
  30.   //   Row()方法类似 这里省略
  31.     .justifyContent(FlexAlign.SpaceAround)
  32.   }
  33. }
复制代码

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


  1. import window from '@ohos.window';
  2. @Entry
  3. @Component
  4. struct Index {
  5.   @State message: string = '春天的菠菜';
  7.   onPageShow(): void {
  8.     window.getLastWindow(AppStorage.get("context"), (err, data) => {
  9.       if (err.code) {
  10.         console.error('Failed to get last window. Cause:' + JSON.stringify(err));
  11.         return;
  12.       }
  13.       data.setFullScreen(true)
  14.     });
  15.   }
  16.   build() {
  17.     Column(){
  18.       Row(){
  19.         Image($r('app.media.ic_arrow_left'))
  20.           .width(30)
  21.         Text('个人中心')
  22.         Image($r('app.media.ic_more'))
  23.           .width(24)
  24.       }
  25.       .justifyContent(FlexAlign.SpaceBetween)
  26.       .width('100%')
  27.       .height(40)
  28.       .backgroundColor(Color.White)
  29.       .padding({left: 10,right: 10})
  31.     }
  33.     .width('100%')
  34.     .height('100%')
  35.     .backgroundColor('#ccc')
  37.   }
  38. }
复制代码

4.3 交叉轴对齐方式



  1. import window from '@ohos.window';
  2. @Entry
  3. @Component
  4. struct Index {
  5.   @State message: string = '春天的菠菜';
  7.   onPageShow(): void {
  8.     window.getLastWindow(AppStorage.get("context"), (err, data) => {
  9.       if (err.code) {
  10.         console.error('Failed to get last window. Cause:' + JSON.stringify(err));
  11.         return;
  12.       }
  13.       data.setFullScreen(true)
  14.     });
  15.   }
  16.   build() {
  17.     Column(){
  18.       Text()
  19.         .width(200)
  20.         .height(100)
  21.         .backgroundColor(Color.Green)
  22.         .border({width: 2})
  23.       Text()
  24.         .width(200)
  25.         .height(100)
  26.         .backgroundColor(Color.Green)
  27.         .border({width: 2})
  28.         .margin({top: 5,bottom: 5})
  29.       Text()
  30.         .width(200)
  31.         .height(100)
  32.         .backgroundColor(Color.Green)
  33.         .border({width: 2})
  35.     }
  37.     .width('100%')
  38.     .height('100%')
  39.     .backgroundColor('#ccc')
  40.     .alignItems(HorizontalAlign.Start)  // Row的交叉轴 垂直对齐方式  VerticalAlign.End
  41.   }
  42. }
复制代码

4.4 综合案例-得物列表项



  1. import window from '@ohos.window';
  2. @Entry
  3. @Component
  4. struct Index {
  5.   @State message: string = '春天的菠菜';
  7.   onPageShow(): void {
  8.     window.getLastWindow(AppStorage.get("context"), (err, data) => {
  9.       if (err.code) {
  10.         console.error('Failed to get last window. Cause:' + JSON.stringify(err));
  11.         return;
  12.       }
  13.       data.setFullScreen(true)
  14.     });
  15.   }
  16.   build() {
  17.     Column(){
  18.       Row(){
  19.         // 左侧列
  20.         Column({ space: 8 }){
  21.           Text('玩一玩')
  22.             .fontSize(18)
  23.             .fontWeight(700)
  24.           Text('签到兑礼 | 超多大奖 超好玩')
  25.             .fontSize(12)
  26.             .fontColor('#999')
  27.         }
  28.         .alignItems(HorizontalAlign.Start) // 交叉轴对齐方式
  29.         // 右侧列
  30.         Row({ space: 8 }){
  31.           Image($r('app.media.tree'))
  32.             .width(50)
  33.             .backgroundColor('#efefef')
  34.             .borderRadius(5)
  35.           Image($r('app.media.ic_arrow_right'))
  36.             .width(20)
  37.             .fillColor('#999')
  38.         }
  39.       }
  40.       .justifyContent(FlexAlign.SpaceBetween)
  41.       .padding({left: 15,right:15})
  42.       .width('100%')
  43.       .height(80)
  44.       .backgroundColor('#fff')
  45.       .borderRadius(5)
  46.     }
  47.     .padding(10)
  48.     .width('100%')
  49.     .height('100%')
  50.     .backgroundColor('#ccc')
  52.   }
  53. }
复制代码

4.4 自定义伸缩-layoutWeight


  1. import window from '@ohos.window';
  2. @Entry
  3. @Component
  4. struct Index {
  5.   @State message: string = '春天的菠菜';
  7.   onPageShow(): void {
  8.     window.getLastWindow(AppStorage.get("context"), (err, data) => {
  9.       if (err.code) {
  10.         console.error('Failed to get last window. Cause:' + JSON.stringify(err));
  11.         return;
  12.       }
  13.       data.setFullScreen(true)
  14.     });
  15.   }
  16.   build() {
  17.     Column(){
  18.     // LayoutWeight
  19.       Row(){
  20.       //   左侧
  21.         Text('左侧')
  22.           .layoutWeight(1)
  23.           .backgroundColor(Color.Green)
  24.           .height(40)
  26.       //   右侧
  27.         Text('右侧固定')
  28.           .width(80)
  29.           .height(40)
  30.           .backgroundColor(Color.Orange)
  31.       }
  32.       .width(300)
  33.       .height(40)
  34.       .backgroundColor('#fff')
  36.       // LayoutWeight 多个对象
  37.       Row(){
  38.         //   老大
  39.         Text('老大')
  40.           .layoutWeight(1)
  41.           .backgroundColor(Color.Green)
  42.           .height(40)
  43.         //   老二
  44.         Text('老二')
  45.           .layoutWeight(2)
  46.           .width(80)
  47.           .height(40)
  48.           .backgroundColor(Color.Pink)
  49.         //   老三
  50.         Text('老三')
  51.           .width(80)
  52.           .height(40)
  53.           .backgroundColor(Color.Orange)
  54.       }
  55.       .width(300)
  56.       .height(40)
  57.       .backgroundColor('#fff')
  58.       .margin({top: 30})
  60.     }
  61.     .padding(10)
  62.     .width('100%')
  63.     .height('100%')
  64.     .backgroundColor('#ccc')
  66.   }
  67. }
复制代码

4.5 综合案例-得物卡片


  1. import window from '@ohos.window';
  2. @Entry
  3. @Component
  4. struct Index {
  5.   @State message: string = '春天的菠菜';
  7.   onPageShow(): void {
  8.     window.getLastWindow(AppStorage.get("context"), (err, data) => {
  9.       if (err.code) {
  10.         console.error('Failed to get last window. Cause:' + JSON.stringify(err));
  11.         return;
  12.       }
  13.       data.setFullScreen(true)
  14.     });
  15.   }
  16.   build() {
  17.     Column(){
  18.       Column(){
  19.         Image($r('app.media.nick'))
  20.           .width('100%')
  21.           .borderRadius({topLeft: 5, topRight: 5})
  22.         Text('今晚吃这个 | 每日艺术分享 No. 43')
  23.           .fontWeight(600)
  24.           .fontSize(14)
  25.           .lineHeight(22)
  26.           .height(60)
  27.       //   底部
  28.         Row(){
  29.           //  底部左侧
  30.           Row({space: 5}){
  31.             Image($r('app.media.user'))
  32.               .height(16)
  33.               .borderRadius(8)
  34.             Text('插画师分享聚集地')
  35.               .fontSize(10)
  36.               .fontColor('#999')
  38.           }
  39.           .layoutWeight(1)
  40.           //底部右侧
  41.           Row({space: 5}){
  42.             Image($r('app.media.ic_like'))
  43.               .width(12)
  44.               .fillColor('#999')
  45.             Text('2300')
  46.               .fontSize(10)
  47.               .fontColor('#666')
  48.           }
  50.         }
  51.         .padding({left: 15,right: 15})
  53.       }
  54.       .width(200)
  55.       .padding({bottom: 15})
  56.       // .height(400) // 设计时先固定高，设计完成去掉
  57.       .backgroundColor(Color.White)
  58.       .borderRadius(5)
  61.     }
  62.     .padding(10)
  63.     .width('100%')
  64.     .height('100%')
  65.     .backgroundColor('#ccc')
  67.   }
  68. }
复制代码
 

4.6 综合案例-京东登录

 



  1. import window from '@ohos.window';
  2. @Entry
  3. @Component
  4. struct Index {
  5.   @State message: string = '春天的菠菜';
  7.   onPageShow(): void {
  8.     window.getLastWindow(AppStorage.get("context"), (err, data) => {
  9.       if (err.code) {
  10.         console.error('Failed to get last window. Cause:' + JSON.stringify(err));
  11.         return;
  12.       }
  13.       data.setFullScreen(true)
  14.     });
  15.   }
  16.   build() {
  17.     Column(){
  18.     //   顶部区域
  19.       Row(){
  20.         Image($r('app.media.jd_cancel'))
  21.           .width(20)
  22.         Text('帮助')
  23.       }
  24.       .width('100%')
  25.       .justifyContent(FlexAlign.SpaceBetween)
  27.     //   Logo
  28.       Image($r('app.media.jd_logo'))
  29.         .width(250)
  30.         .height(250)
  31.    // 国家地址区域
  32.       Row(){
  33.         Text('国家/地址')
  34.           .layoutWeight(1)
  35.           .fontColor('#666')
  36.         Text('中国(+86)')
  37.           .margin({right: 5})
  38.           .fontColor('#666')
  39.         Image($r('app.media.jd_right'))
  40.           .width(20)
  41.           .fillColor('#666')
  43.       }
  44.       .width('100%')
  45.       .height(40)
  46.       .backgroundColor('#fff')
  47.       .borderRadius(20)
  48.       .padding({left: 15, right:10})
  50.     //   手机号（输入框）
  51.       TextInput({
  52.         placeholder: '请输入手机号'
  53.       })
  54.         .height(40)
  55.         .borderRadius(20)
  56.         .backgroundColor('#fff')
  57.         .margin({top: 20})
  58.         .placeholderColor('#666')
  60.     //   已阅读并同意
  61.       Row(){
  62.         Checkbox()
  63.           .width(10)
  64.           .margin({top: 7})
  65.         // 一段文本中，有文本样式需要单独定制，TEXT 包括SPAN
  66.         Text(){
  67.           Span('我已阅读并同意')
  68.           Span('《京东隐私政策》').fontColor('#3274f6')
  69.           Span('《京东用户服务协议》').fontColor('#3274f6')
  70.           Span('未注册的手机号将自动创建京东账号')
  71.         }
  72.         .fontSize(12)
  73.         .fontColor('#666')
  74.         .lineHeight(20)
  76.       }
  77.       .alignItems(VerticalAlign.Top)
  78.       .margin({top: 20})
  80.     //  登录
  81.       Button('登录')
  82.         .width('100%')
  83.         .backgroundColor('#bf2838')
  84.         .margin({top: 25})
  86.     //   新用户注册等
  87.       Row({ space: 25 }){
  88.         Text('新用户注册').fontSize(14).foregroundColor('#666')
  89.         Text('账户密码登录').fontSize(14).foregroundColor('#666')
  90.         Text('无法登录').fontSize(14).foregroundColor('#666')
  91.       }
  92.       .margin({top: 15})
  93.       // 填充组件Black() 作用 填充空白区域
  94.       Blank()
  95.       // 底部其他登录方式
  96.       Column(){
  97.         Text('其他登录方式')
  98.           .fontColor('#666')
  99.           .height(22)
  100.           .fontSize(14)
  101.           .margin({bottom: 28})
  102.         Row(){
  103.           Image($r('app.media.jd_huawei')).width(34)
  104.           Image($r('app.media.jd_wechat')).width(34).fillColor('#56a44a')
  105.           Image($r('app.media.jd_weibo')).width(34).fillColor('#c8493b')
  106.           Image($r('app.media.jd_QQ')).width(34).fillColor('#4ba0e8')
  108.         }
  109.         .width('100%')
  110.         .margin({bottom: 30})
  111.         .justifyContent(FlexAlign.SpaceAround)
  113.       }
  114.       .width('100%')
  115.       // .backgroundColor(Color.Pink)
  117.     }
  118.     .padding(20)
  119.     .width('100%')
  120.     .height('100%')
  121.     .backgroundColor(Color.Pink)
  122.     .backgroundImage($r('app.media.jd_login_bg'))
  123.     .backgroundImageSize(ImageSize.Cover)
  125.   }
  126. }
复制代码


五、弹性布局


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

  1. import window from '@ohos.window';
  2. @Entry
  3. @Component
  4. struct Index {
  5.   @State message: string = '春天的菠菜';
  7.   onPageShow(): void {
  8.     window.getLastWindow(AppStorage.get("context"), (err, data) => {
  9.       if (err.code) {
  10.         console.error('Failed to get last window. Cause:' + JSON.stringify(err));
  11.         return;
  12.       }
  13.       data.setFullScreen(true)
  14.     });
  15.   }
  16.   build() {
  17.     // Flex默认是主轴，水平往右，交叉轴是垂直往下 （跟我们Row相似）
  18.     // 1、 主轴方向
  19.     // direction: FlexDirection.Column  / Row   // 改变主轴方向 {direction: FlexDirection.Column} 改成垂直往下
  20.     // 2、 主轴对齐方式
  21.     // justifyContent: FlexAlign.SpaceAround
  22.     // 3、交叉轴对齐方式
  23.     // alignItems: ItemAlign.End
  25.     Flex({direction: FlexDirection.Row,
  26.       justifyContent: FlexAlign.SpaceAround,
  27.       alignItems: ItemAlign.End
  29.     }){
  31.       Text()
  32.         .width(80).height(80)
  33.         .backgroundColor(Color.Pink)
  34.         .border({width: 1, color: Color.Blue})
  35.       Text()
  36.         .width(80).height(80)
  37.         .backgroundColor(Color.Pink)
  38.         .border({width: 1, color: Color.Blue})
  39.       Text()
  40.         .width(80).height(80)
  41.         .backgroundColor(Color.Pink)
  42.         .border({width: 1, color: Color.Blue})
  43.     }
  44.     .width('100%').height(600)
  45.     .backgroundColor('#5f9a5c')
  49.   }
  50. }
复制代码

5.2 综合案例Flex 换行 -wrap


  1. import window from '@ohos.window';
  2. @Entry
  3. @Component
  4. struct Index {
  5.   @State message: string = '春天的菠菜';
  7.   onPageShow(): void {
  8.     window.getLastWindow(AppStorage.get("context"), (err, data) => {
  9.       if (err.code) {
  10.         console.error('Failed to get last window. Cause:' + JSON.stringify(err));
  11.         return;
  12.       }
  13.       data.setFullScreen(true)
  14.     });
  15.   }
  16.   build() {
  17.     Column(){
  18.       Text('阶段选择')
  19.         .fontSize(30)
  20.         .fontWeight(700)
  21.         .padding(15)
  22.         .width('100%')
  23.       Flex({
  24.         wrap: FlexWrap.Wrap
  25.       }){
  26.         Text('ArkUI').margin(5).padding(10).backgroundColor('#f1f1f1')
  27.         Text('ArkTS').margin(5).padding(10).backgroundColor('#f1f1f1')
  28.         Text('界面开发').margin(5).padding(10).backgroundColor('#f1f1f1')
  29.         Text('系统能力').margin(5).padding(10).backgroundColor('#f1f1f1')
  30.         Text('权限控制').margin(5).padding(10).backgroundColor('#f1f1f1')
  31.         Text('元服务').margin(5).padding(10).backgroundColor('#f1f1f1')
  32.       }
  33.     }
  35.   }
  36. }
复制代码

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

6.1 绝对定位和层级


  1. import window from '@ohos.window';
  2. @Entry
  3. @Component
  4. struct Index {
  5.   @State message: string = '春天的菠菜';
  7.   onPageShow(): void {
  8.     window.getLastWindow(AppStorage.get("context"), (err, data) => {
  9.       if (err.code) {
  10.         console.error('Failed to get last window. Cause:' + JSON.stringify(err));
  11.         return;
  12.       }
  13.       data.setFullScreen(true)
  14.     });
  15.   }
  16.   build() {
  17.     Column(){
  18.       Text('张三').width(80).height(80).backgroundColor(Color.Green)
  19.       Text('李四').width(80).height(80).backgroundColor(Color.Yellow)
  20.         .position({ //绝对定位
  21.           x: 50,
  22.           y: 50
  23.         })
  24.         .zIndex(1) //层级
  25.       Text('王二').width(80).height(80).backgroundColor(Color.Orange)
  27.     }
  28.    .width(300).height(300)
  29.     .backgroundColor(Color.Pink)
  30.   }
  31. }
复制代码

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


  1. import window from '@ohos.window';
  2. @Entry
  3. @Component
  4. struct Index {
  5.   @State message: string = '春天的菠菜';
  7.   onPageShow(): void {
  8.     window.getLastWindow(AppStorage.get("context"), (err, data) => {
  9.       if (err.code) {
  10.         console.error('Failed to get last window. Cause:' + JSON.stringify(err));
  11.         return;
  12.       }
  13.       data.setFullScreen(true)
  14.     });
  15.   }
  16.   build() {
  17.     Column(){
  18.     // 先整体 再局部 再细节
  19.       Column(){
  20.         // 定位 的VIP
  21.         Text('VIP')
  22.           .position({
  23.             x: 0,
  24.             y: 0
  25.           })
  26.           .zIndex(666)
  27.           .width(40).height(20)
  28.           .backgroundColor('#e49642')
  29.           .borderRadius({
  30.             topLeft: 10,
  31.             bottomRight: 10
  32.           })
  33.           .border({width: 2,color: '#fbe7a3'})
  34.           .fontColor('#fbe7a3')
  35.           .fontStyle(FontStyle.Italic)
  36.           .fontSize(14).fontWeight(700)
  37.           .textAlign(TextAlign.Center) // 文本对齐方式  或者使用 .padding({left: 5})
  40.         // 上图
  41.         Image($r('app.media.position_moco'))
  42.           .width('100%').height(210)
  43.           .borderRadius(10)
  45.       //   下row 图+文本
  46.         Row(){
  47.           Image($r('app.media.position_earphone'))
  48.             .width(20)
  49.             .backgroundColor('#55b7f4')
  50.             .borderRadius(10)
  51.             .padding(3)
  52.             .fillColor(Color.White)
  53.             .margin({left: 6, right: 6})
  54.           Text('飞狗MOCO')
  55.             .fontWeight(700)
  57.         }
  58.         .width('100%').height(30)
  59.         // .backgroundColor(Color.Orange)
  62.       }
  63.       .width(160).height(240)
  64.       .backgroundColor(Color.White)
  66.     }
  67.     .width('100%')
  68.     .height('100%')
  69.     .backgroundColor(Color.Pink)
  70.   }
  71. }
复制代码

七、层叠布局

7.1 层叠布局示例




  1. import window from '@ohos.window';
  2. @Entry
  3. @Component
  4. struct Index {
  5.   @State message: string = '春天的菠菜';
  7.   onPageShow(): void {
  8.     window.getLastWindow(AppStorage.get("context"), (err, data) => {
  9.       if (err.code) {
  10.         console.error('Failed to get last window. Cause:' + JSON.stringify(err));
  11.         return;
  12.       }
  13.       data.setFullScreen(true)
  14.     });
  15.   }
  16.   build() {
  17.     // 层叠布局
  18.     Stack({
  19.       alignContent: Alignment.Bottom  // 改变位置
  20.     }){
  21.       Text('刘备')
  22.         .width(250).height(250)
  23.         .backgroundColor(Color.Pink)
  24.       Text('关羽')
  25.         .width(150).height(150)
  26.         .backgroundColor(Color.Orange)
  27.       Text('张飞')
  28.         .width(50).height(50)
  29.         .backgroundColor(Color.Yellow)
  32.     }
  33.     .width(300).height(600)
  34.     .backgroundColor(Color.Green)
  36.   }
  37. }
复制代码

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



  1. import window from '@ohos.window';
  2. @Entry
  3. @Component
  4. struct Index {
  5.   @State message: string = '春天的菠菜';
  7.   onPageShow(): void {
  8.     window.getLastWindow(AppStorage.get("context"), (err, data) => {
  9.       if (err.code) {
  10.         console.error('Failed to get last window. Cause:' + JSON.stringify(err));
  11.         return;
  12.       }
  13.       data.setFullScreen(true)
  14.     });
  15.   }
  16.   build() {
  18.     Column(){
  19.       Column(){
  20.         //  上面图片区域（层叠使用）
  21.         Stack({alignContent: Alignment.Bottom }){
  22.           Image($r('app.media.bz_img'))
  23.             .borderRadius({
  24.               topLeft: 10,
  25.               topRight:10
  26.             })
  27.           Row(){
  28.             Row({space: 5}){
  29.               Image($r('app.media.bz_play'))
  30.                 .width(14)
  31.                 .fillColor(Color.White)
  32.               Text('288万')
  33.                 .fontSize(12)
  34.                 .fontColor(Color.White)
  35.             }
  36.             .margin({right: 10})
  37.             Row({space: 5}){
  38.               Image($r('app.media.bz_msg'))
  39.                 .width(14)
  40.                 .fillColor(Color.White)
  41.               Text('8655')
  42.                 .fontSize(12)
  43.                 .fontColor(Color.White)
  44.             }
  45.             Blank()
  46.             Text('4:33')
  47.               .fontSize(12)
  48.               .fontColor(Color.White)
  51.           }
  52.           .width('100%').height(24)
  53.           .padding({left: 5, right: 5})
  54.           // .backgroundColor(Color.Orange)
  56.         }
  57.         .width('100%').height(125)
  58.         Column(){
  59.           Text('【凤凰传奇新歌】 还原来到国风统治区：唢呐一响神曲《铁衣》，歌声送到了海内外')
  60.             .fontSize(13)
  61.             .lineHeight(16)
  62.             .textOverflow({overflow:TextOverflow.Ellipsis})
  63.             .maxLines(2)
  64.           Row(){
  65.             Text('19万点赞')
  66.               .fontSize(10)
  67.               .fontColor('#e66c43')
  68.               .backgroundColor('#faf0ef')
  69.               .padding(5)
  70.               .borderRadius(2)
  71.             Image($r('app.media.bz_more'))
  72.               .width(14)
  73.           }
  74.           .margin({top: 6})
  75.           .width('100%')
  76.           .justifyContent(FlexAlign.SpaceBetween)
  77.         }
  78.         .padding(5)
  81.       }
  82.       .width(200).height(200)
  83.       .backgroundColor(Color.White)
  84.       .borderRadius(10)
  85.       .margin({top: 10})
  89.     }
  90.     .width('100%').height('100%')
  91.     .backgroundColor('#ccc')
  93.   }
  94. }
复制代码

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


 





 


 
  1. import window from '@ohos.window';
  2. @Entry
  3. @Component
  4. struct Index {
  5.   @State message: string = '春天的菠菜';
  7.   onPageShow(): void {
  8.     window.getLastWindow(AppStorage.get("context"), (err, data) => {
  9.       if (err.code) {
  10.         console.error('Failed to get last window. Cause:' + JSON.stringify(err));
  11.         return;
  12.       }
  13.       data.setFullScreen(true)
  14.     });
  15.   }
  16.   build() {
  17.     Stack({ alignContent: Alignment.Bottom }){
  18.     //   2 主体展示区
  19.       Stack({alignContent: Alignment.Top}){
  20.       //   2.1 头部
  21.         Row(){
  22.           // 左边
  23.           Column(){
  24.             Text('北京').fontSize(18).fontColor('#fff')
  25.             Text('晴 2℃').fontSize(12).fontColor('#fff')
  26.             Image($r('app.media.zfb_head_down'))
  27.               .position({
  28.                 x: 40,
  29.                 y: 0
  30.               })
  31.               .width(12).fillColor('#fff')
  32.           }
  34.         //   中间
  35.           Row(){
  36.             Image($r('app.media.zfb_head_search'))
  37.               .width(20)
  38.               .fillColor('#666')
  39.               .margin({left: 5, right: 5})
  40.             Text('北京交通一卡通')
  41.               .layoutWeight(1)
  42.             Text('搜索')
  43.               .width(55)
  44.               .fontColor('#5b73de')
  45.               .fontWeight(700)
  46.               .textAlign(TextAlign.Center)
  47.               .border({
  48.                 width: {left: 1},
  49.                 color: '#ccc'
  50.               })
  53.           }
  54.           .height(32)
  55.           .layoutWeight(1)
  56.           .backgroundColor(Color.White)
  57.           .borderRadius(5)
  58.           .margin({left: 25, right: 12})
  60.         //   右边
  61.           Image($r('app.media.zfb_head_plus'))
  62.             .width(30)
  63.             .fillColor('#fff')
  65.         }
  66.         .width('100%').height(60)
  67.         .backgroundColor('#5b73de')
  68.         .zIndex(666)
  69.         .padding({left: 10,right: 10})
  71.       //   2.2 主体页面
  72.      Scroll(){
  73.        Column(){
  74.          // TOP快捷按钮区域
  75.         Row(){
  76.           Column(){
  77.             Image($r('app.media.zfb_top_scan'))
  78.               .width(36)
  79.               .fillColor('#fff')
  80.             Text('扫一扫')
  81.               .fontColor('#fff')
  82.           }
  83.           .layoutWeight(1)
  86.           Column(){
  87.             Image($r('app.media.zfb_top_pay'))
  88.               .width(36)
  89.               .fillColor('#fff')
  90.             Text('收付款')
  91.               .fontColor('#fff')
  92.           }
  93.           .layoutWeight(1)
  95.           Column(){
  96.             Image($r('app.media.zfb_top_travel'))
  97.               .width(36)
  98.               .fillColor('#fff')
  99.             Text('出行')
  100.               .fontColor('#fff')
  101.           }
  102.           .layoutWeight(1)
  105.           Column(){
  106.             Image($r('app.media.zfb_top_card'))
  107.               .width(36)
  108.               .fillColor('#fff')
  109.             Text('卡包')
  110.               .fontColor('#fff')
  111.           }
  112.           .layoutWeight(1)
  114.         }
  115.          .backgroundColor('#5b73de')
  116.          .padding({top:5, bottom: 15})
  118.        //   主体区 （背景色#f6f6f6
  119.          Column(){
  120.          //  导航区
  121.            Column({space: 10}){
  122.              Row(){
  123.                Column(){
  124.                  Image($r('app.media.zfb_nav1'))
  125.                    .width(28).margin({bottom: 8})
  126.                  Text('滴滴出行')
  127.                    .fontSize(12).fontColor('#666')
  129.                }
  130.                .layoutWeight(1)
  132.                Column(){
  133.                  Image($r('app.media.zfb_nav2'))
  134.                    .width(28).margin({bottom: 8})
  135.                  Text('生活缴费')
  136.                    .fontSize(12).fontColor('#666')
  138.                }
  139.                .layoutWeight(1)
  141.                Column(){
  142.                  Image($r('app.media.zfb_nav3'))
  143.                    .width(28).margin({bottom: 8})
  144.                  Text('股票')
  145.                    .fontSize(12).fontColor('#666')
  146.                }
  147.                .layoutWeight(1)
  149.                Column(){
  150.                  Image($r('app.media.zfb_nav4'))
  151.                    .width(28).margin({bottom: 8})
  152.                  Text('蚂蚁森林')
  153.                    .fontSize(12).fontColor('#666')
  154.                }
  155.                .layoutWeight(1)
  157.                Column(){
  158.                  Image($r('app.media.zfb_nav5'))
  159.                    .width(28).margin({bottom: 8})
  160.                  Text('手机充值')
  161.                    .fontSize(12).fontColor('#666')
  162.                }
  163.                .layoutWeight(1)
  165.              }
  166.              Row(){
  167.                Column(){
  168.                  Image($r('app.media.zfb_nav6'))
  169.                    .width(28).margin({bottom: 8})
  170.                  Text('余额宝')
  171.                    .fontSize(12).fontColor('#666')
  173.                }
  174.                .layoutWeight(1)
  176.                Column(){
  177.                  Image($r('app.media.zfb_nav7'))
  178.                    .width(28).margin({bottom: 8})
  179.                  Text('花呗')
  180.                    .fontSize(12).fontColor('#666')
  182.                }
  183.                .layoutWeight(1)
  185.                Column(){
  186.                  Image($r('app.media.zfb_nav8'))
  187.                    .width(28).margin({bottom: 8})
  188.                  Text('飞猪旅行')
  189.                    .fontSize(12).fontColor('#666')
  190.                }
  191.                .layoutWeight(1)
  193.                Column(){
  194.                  Image($r('app.media.zfb_nav9'))
  195.                    .width(28).margin({bottom: 8})
  196.                  Text('淘票票')
  197.                    .fontSize(12).fontColor('#666')
  198.                }
  199.                .layoutWeight(1)
  201.                Column(){
  202.                  Image($r('app.media.zfb_nav10'))
  203.                    .width(28).margin({bottom: 8})
  204.                  Text('饿了么')
  205.                    .fontSize(12).fontColor('#666')
  206.                }
  207.                .layoutWeight(1)
  209.              }
  210.              Row(){
  211.                Column(){
  212.                  Image($r('app.media.zfb_nav11'))
  213.                    .width(28).margin({bottom: 8})
  214.                  Text('读书听书')
  215.                    .fontSize(12).fontColor('#666')
  216.                }
  217.                .layoutWeight(1)
  219.                Column(){
  220.                  Image($r('app.media.zfb_nav12'))
  221.                    .width(28).margin({bottom: 8})
  222.                  Text('基金')
  223.                    .fontSize(12).fontColor('#666')
  224.                }
  225.                .layoutWeight(1)
  227.                Column(){
  228.                  Image($r('app.media.zfb_nav13'))
  229.                    .width(28).margin({bottom: 8})
  230.                  Text('直播广场')
  231.                    .fontSize(12).fontColor('#666')
  232.                }
  233.                .layoutWeight(1)
  235.                Column(){
  236.                  Image($r('app.media.zfb_nav14'))
  237.                    .width(28).margin({bottom: 8})
  238.                  Text('医疗健康')
  239.                    .fontSize(12).fontColor('#666')
  240.                }
  241.                .layoutWeight(1)
  243.                Column(){
  244.                  Image($r('app.media.zfb_nav15_more'))
  245.                    .width(28).margin({bottom: 8})
  246.                  Text('更多')
  247.                    .fontSize(12).fontColor('#666')
  248.                }
  249.                .layoutWeight(1)
  251.              }
  252.            }
  253.            .padding(10)
  255.          //   产品区
  256.            Row({space: 5}){
  257.              Image($r('app.media.zfb_pro_pic1'))
  258.                .layoutWeight(1)
  259.              Image($r('app.media.zfb_pro_pic2'))
  260.                .layoutWeight(1)
  261.              Image($r('app.media.zfb_pro_pic3'))
  262.                .layoutWeight(1)
  263.            }
  264.            .padding(10)
  266.            Column({space: 10}){
  267.              Image($r('app.media.zfb_pro_list1'))
  268.                .width('100%')
  269.              Image($r('app.media.zfb_pro_list2'))
  270.                .width('100%')
  271.            }
  272.            .padding(10)
  275.          }
  276.          // .height(1000)
  277.          .width('100%')
  278.          .backgroundColor('#fff')
  279.          .borderRadius({
  280.            topLeft: 20,
  281.            topRight: 20
  283.          })
  287.        }
  288.        .width('100%')
  289.        .padding({top: 60,bottom: 60})
  290.      }
  294.       }
  295.       .width('100%').height('100%')
  299.     //   1 底部Tab导航区
  300.       Row(){
  301.         Column(){
  302.           Image($r('app.media.zfb_tab_home'))
  303.             .width(35)
  305.         }
  306.         .layoutWeight(1)
  308.         Column(){
  309.           Image($r('app.media.zfb_tab_money'))
  310.             .width(28)
  311.             .margin({bottom: 2})
  312.           Text('理财')
  313.             .fontSize(12)
  315.         }
  316.         .layoutWeight(1)
  318.         Column(){
  319.           Image($r('app.media.zfb_tab_life'))
  320.             .width(28)
  321.             .margin({bottom: 2})
  322.           Text('生活')
  323.             .fontSize(12)
  325.         }
  326.         .layoutWeight(1)
  328.         Column(){
  329.           Image($r('app.media.zfb_tab_chat'))
  330.             .width(28)
  331.             .margin({bottom: 2})
  332.           Text('消息')
  333.             .fontSize(12)
  335.         }
  336.         .layoutWeight(1)
  338.         Column(){
  339.           Image($r('app.media.zfb_tab_me'))
  340.             .width(28)
  341.             .margin({bottom: 2})
  342.           Text('我的')
  343.             .fontSize(12)
  345.         }
  346.         .layoutWeight(1)
  348.       }
  349.       .width('100%').height(60)
  350.       .backgroundColor('#fbfcfe')
  353.     }
  354.     .width('100%').height('100%')
  355.     .backgroundColor('#5b73de')
  356.   }
  357. }
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/) Powered by Discuz! X3.4