HarmonyOS Next 纯血星河版【三】设计资源 SVG、页面布局元素、组件圆角、背景属性 && 线性布局（主轴、交叉轴）的设置 && 自适应伸缩 && 得物卡片练习 、京东登录页实战练习

最新推荐文章于 2024-07-13 10:21:33 发布
最新推荐文章于 2024-07-13 10:21:33 发布
阅读量1.3k 收藏 14
点赞数 11
分类专栏： HarmonyOS Next 纯血星河版 Harmony OS 4.0 + Next 文章标签： harmonyos 华为
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Forever_Hopeful/article/details/138198978
版权

LiuJinTao： 2024年4月26日

文章目录

HarmonyOS Next 纯血星河版【三】

一、设计资源 - svg 图标

在这里插入图片描述
官网地址：https://developer.huawei.com/consumer/cn/design/harmonyos-icon/

1. 代码示例
@Entry
@Component
struct IcDemo {
  build() {
    Column() {
      // 使用 svg 图标，和图片使用的方式一样的
      Image($r('app.media.ic_contacts_5G'))
        .width(100)
        .fillColor(Color.Green)
    }
  }
}
2. 小结

在这里插入图片描述

二、布局元素的组成

在这里插入图片描述

三、 内边距 padding

在这里插入图片描述

四、 外边距 margin

在这里插入图片描述

五、 padding 和 margin 综合练习

需求：实现如下图所示的登录效果
在这里插入图片描述

代码示例；

@Entry
@Component
struct LoginDemo {
  build() {
    Column() {
      Image($r('app.media.touxinag'))
        .width(150)

      Text('全栈攻城狮喜欢音乐')
        .width(200)
        .fontSize(18)
        .fontColor('#FFAACC')
        .margin({
          top: 20,
          right: 45,
          left: 100,
          bottom: 30
        })

        Button('QQ登录')
          .width('80%')
          .margin({
            bottom: 20
          })
        Button('微信登录')
          .width('80%')
          .fontColor(Color.Black)
          .backgroundColor('#ddd')


    }
    .padding(20)
    .width('90%')
  }
}
  • 效果演示
    在这里插入图片描述

六、 边框 border

在这里插入图片描述

七、组件圆角

在这里插入图片描述

  • 特殊圆角
    在这里插入图片描述

八、背景属性

在这里插入图片描述

1. 背景图的基本使用

在这里插入图片描述

  • 属性效果
    在这里插入图片描述

代码示例效果：

在这里插入图片描述

小结：
在这里插入图片描述

2. 背景图位置的设置

在这里插入图片描述

代码示例：
在这里插入图片描述

  • 小结
    在这里插入图片描述
3. 背景位置 - 单位问题

在这里插入图片描述

在这里插入图片描述

  • 不错，建议还是使用 vp 为单位， 反正内部他会帮我们转为px，你想200px，就直接写200vp。
    在这里插入图片描述
4. 背景尺寸

在这里插入图片描述

九、线性布局 - 主轴

在这里插入图片描述

1. 主轴方向排列方式 Column

在这里插入图片描述
在这里插入图片描述

  • 总结
  • 在这里插入图片描述

十、顶部导航 - 练习

在这里插入图片描述
代码示例：

@Entry
@Component
struct CenterTest {
  build() {
    Column() {
      Row() {
        Text('<')
          .fontSize(20)
        Text('个人中心')
          .fontSize(20)
        Image($r('app.media.centertest'))
          .width(30)

      }
      .padding(10)
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
    }
  }
}

在这里插入图片描述

十一、线性布局 - 交叉轴

在这里插入图片描述

  • 小结
    在这里插入图片描述

十二、线性布局练习

在这里插入图片描述

代码示例：
@Entry
@Component
struct HuaWeiListDemo {
  build() {
    Column() {
      Row() {
        Column( { space: 10 }) {
          Text('HUEWEI')
            .fontSize(20)
            .fontWeight(700)
          Text('胡杨不死，麒麟不绝！')
            .fontSize(12)
            .fontColor('#999')
        }
        .alignItems(HorizontalAlign.Start)
        Row() {
          Image($r('app.media.huawei'))
            .width(50)
            .margin({
              right: 20
            })
          Image($r('app.media.ic_contacts_5G'))
            .width(20)
        }
      }
      .backgroundColor('#fff')
      .borderRadius(15)
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
      .padding({
        left: 20,
        right: 20
      })
      .margin({
        top: 20
      })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#999')
  }
}

在这里插入图片描述

十三、自适应伸缩

  • 份数权重
  • 剩余空间

在这里插入图片描述
代码示例：

@Entry
@Component
struct weightDemo{
  build() {
    Column() {
      Row() {
        Text('状态栏')
          .layoutWeight(1)
          .fontSize(18)
          .margin({ right: 10})
        Image($r('app.media.ic_power_off'))
          .width(50)
          .height(50)
          .margin({ left: 10, right:10})
        Image($r('app.media.ic_wuraomoshi'))
          .width(50)
          .height(50)
          .margin({ left: 10, right:10})
        Image($r('app.media.ic_feixingmoshi'))
          .width(50)
          .height(50)
          .margin({ left: 10, right:10})
      }
      .width(300)
      .height(70)
      .backgroundColor('#fff')
      .borderRadius(15)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#999')
    .padding({
      top: 100,
      bottom: 50
    })
  }
}

效果展示： 这里除了状态栏占了一份权重，其他的都给了固定的宽度，那么，所有的都属于状态栏的宽度了。

在这里插入图片描述

十四、得物卡片 - 综合练习

在这里插入图片描述

代码示例：
@Entry
@Component
struct DewuDemo {
  build() {
    Column() {
      // 详情区域
      Column() {
        // 图片
        Image($r('app.media.dewu'))
          .width('100%')
          .layoutWeight(1)
          .backgroundImageSize(ImageSize.Cover)
          .borderRadius({
            topLeft: 15,
            topRight: 15
          })
        // 简介区域
        Column( { space: 15 } ) {
          Column({ space: 10 }) {
            Text('Mate 60 | 致敬奔腾不息的你')
              .fontWeight(700)
              .fontSize(20)
            Text('No. 1')
              .fontWeight(700)
              .fontSize(20)
          }
          .width('100%')
          .alignItems(HorizontalAlign.Start)
          // 头像 区域
          Row() {
            Row( { space: 10 }) {
              Image($r('app.media.touxiang_huawei'))
                .width(40)
                .height(40)
                .borderRadius(20)
              Text('HMOS')
                .fontSize(18)
                .fontColor('#999')
            }
            .layoutWeight(1)
            Row({ space: 5 }) {
              Image($r('app.media.ic_dianzan'))
                .width(20)

              Text('9999')
                .fontColor('#999')
            }
            .width(80)
          }
          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween)

        }
        .width('100%')
        .height(130)
        .backgroundColor('#FFF')
        .padding(10)
        .borderRadius( { bottomLeft: 15, bottomRight: 15} )
        }
      .width(300)
      .height(400)


    }
    .width('100%')
    .height('100%')
    .backgroundColor('#fffdf9f9')
    .padding(20)
  }
}
  • 效果演示

在这里插入图片描述

京东登录页 - 实战练习

在这里插入图片描述
代码示例：

@Entry
@Component
struct JDLoginTest {
  build() {
    Column() {
      Column() {
        // 背景图
        // Text()
        //   .backgroundImage($r('app.media.background_loging_image'))
        //   .backgroundImageSize(ImageSize.Cover)
        //   .width('100%')
        //   .height('100%')
        // 整个内容区域

        // 顶部导航栏区域
        Row() {
          Image($r('app.media.ic_public_cancel_filled'))
            .width(16)
            .fillColor('#999')

          Text('帮助')
            .fontSize(16)
            .fontColor('#999')
        }
        .width('100%')
        .height(40)
        .justifyContent(FlexAlign.SpaceBetween)

        // logo区域
        Row() {
          Image($r('app.media.jd_login_image'))
        }
        .width(250)
        .height(250)
        .margin({
          top: 20,
          bottom: 15
        })

        // 输入框区域
        Column( { space: 20}) {
          Row() {
            Text('国家/地址')
              .fontColor('#999')
              .layoutWeight(1)
            Text('中国(+86) >')
              .fontColor('#999')
          }
          .width('100%')
          .height(40)
          .padding({
            left: 17,
            right: 10
          })
          .backgroundColor('#fff')
          .borderRadius(20)
          .justifyContent(FlexAlign.SpaceBetween)
          Row() {
            TextInput({ placeholder: '请输入手机号'})
              .placeholderColor('#999')
              .backgroundColor('#fff')
          }
        }
        // 协议区域
        Row(){
          Checkbox()
            .width(10)

          Text() {
            Span('我已阅读并同意')
            Span('《京东隐私政策》')
              .fontColor('#3274f6')
            Span('《京东用户服务协议》')
              .fontColor('#3274f6')
              .fontColor('#3274f6')
            Span('未注册的手机号自动注册为京东账户')
          }
            .fontSize(12)
            .fontColor('#999')
        }
        .width('100%')
        .margin({
          top: 20,
          bottom: 20
        })
        .alignItems(VerticalAlign.Top)

        // 登录按钮
        Button('登录')
          .backgroundColor('#bf2838')
          .width('100%')
          .margin({
            bottom: 15
          })
        // 注册和忘记密码以及问题反馈区域
        Row() {
          Text('新用户注册')
            .fontSize(14)
            .fontColor('#999')
          Text('账户密码登录')
            .fontSize(14)
            .fontColor('#999')
          Text('无法登陆')
            .fontSize(14)
            .fontColor('#999')
        }
        .width('100%')
        .justifyContent(FlexAlign.SpaceEvenly)
        .margin( { bottom: 50} )

        // 空白的全部由我承担，其他的自己管理好自己。
        Blank()

        // 其他方式登录区域
        Column(){
          Text('其它方式登录')
            .height(22)
            .fontSize(14)
            .fontColor('#999')
            .margin({ bottom: 28})
          Row() {
            Image($r('app.media.huawei'))
              .width(34)
              .height(34)
              .borderRadius(17)
            Image($r('app.media.weixin_login_image'))
              .width(34)
              .height(34)
              .borderRadius(17)
            Image($r('app.media.weibo_login_image'))
              .width(34)
              .height(34)
              .borderRadius(17)
            Image($r('app.media.qq_login_image'))
              .width(34)
              .height(34)
              .borderRadius(17)
          }
          .width('100%')
          .justifyContent(FlexAlign.SpaceEvenly)

        }
        .width('100%')
        .height(100)
      }
      .width('100%')
      .height('100%')
      .padding({
        top: 20,
        right: 20,
        bottom: 50,
        left: 20
      })
      .backgroundImage($r('app.media.background_loging_image'))
      .backgroundImageSize(ImageSize.Cover)
    }
  }
}

效果展示
在这里插入图片描述

总结：
在这里插入图片描述

脱发使我稳重
关注
  • 11
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HarmonyOS鸿蒙开发指南:组件开发 svg详细介绍
sybh的博客
01-10 1075
line x1="180" x2="280" y1="500" y2="500" stroke-width="4" fill="white" stroke="black"> //窗框。 //窗框。M/m = moveto 参数x和y表示需要移动到点的x轴和y轴的坐标。
harmonyos鸿蒙,HarmonyOS鸿蒙之设置圆角
weixin_31861055的博客
05-27 3690
1、同时设置四个角 a、静态设置graphic下新建 background_supertext_red.xmlohos:shape="rectangle">ohos:color="$color:white"/>ohos:width="2"ohos:color="$color:red"/>ohos:radius="20"/>layout.xml中引用ohos:height="...
鸿蒙HarmonyOS开发，颜色资源配置文件添加及使用和自定义圆角背景,把自己踩的坑记下来！！！！
weixin_37191074的博客
06-07 2441
需要设置字体颜色边框颜色，想和Android一样写一个颜色的配置文件，查官方文档只需要在 resources > base > element文件夹下jia
HarmonyOS NEXT Beta 版开发者及先锋用户招募（第一期）报名答题题库（持续更新中，仅供学习分享使用）
热门推荐
qq_45875242的博客
06-22 2万+
关于容器组件Row和Column，下面说法错误的是：B. Row容器主轴为水平方向，Column容器主轴为垂直方向。C. justifyContent用于设置子组件在主轴方向上的对齐格式。D. Row容器交叉轴为垂直方向，Column容器交叉轴为水平方向。关于Button组件，下面哪个样式是胶囊型按钮？D. 以上都不是UIAbility切换至前台时触发一下哪种状态？
SVG多边形图片网格布局特效
06-24
在这个“SVG多边形图片网格布局特效”中，我们利用SVG的强大功能，将网页的背景分割成多个自定义形状的多边形，并在每个多边形内填充一张图片，从而实现一种独特的视觉效果。 首先，SVG的优势在于其矢量特性，这...
HarmonyOS应用开发-Svg组件体验.docx
06-05
HarmonyOS应用开发-Svg组件体验
HarmonyOS应用开发-Svg组件ellipse.docx
06-05
HarmonyOS应用开发-Svg组件ellipse
HarmonyOS应用开发-Svg组件circle.docx
06-05
HarmonyOS应用开发-Svg组件circle
Peach 100+插画设计元素 .svg素材下载
04-20
总之，"Peach 100+插画设计元素 .svg素材下载" 提供了丰富的设计资源，适合各种图形设计需求。无论是专业设计师还是业余爱好者，都能从中受益，利用SVG的特性创造出高品质、可扩展的视觉内容。通过适当的设计工具，...
鸿蒙语言基础类库：【@ohos.util.TreeSet (非线性容器TreeSet)】
2301_76813281的博客
07-10 815
TreeSet基于[TreeMap]实现，在TreeSet中，只对value对象进行处理。TreeSet可用于存储一系列值的集合，元素中value唯一且有序。
鸿蒙系统：未来智能生态的引领者
weixin_40183036的博客
07-08 835
在当今这个日新月异的互联网领域，操作系统作为连接硬件与软件的桥梁，其重要性不言而喻。随着华为鸿蒙系统（HarmonyOS）的崛起，一场关于操作系统未来的讨论再次被推向高潮。鸿蒙OS，华为的全新力作，是分布式微内核系统的代表。它让设备间无缝协作，实现“跨平台、分布式体验鸿蒙OS有四大亮点：分布架构、流畅运行、内核安全、生态共享。外观上，鸿蒙和EMUI很像，但体验升级明显。它兼容安卓软件，流畅度大幅提升，性能增强42%，还更省电。鸿蒙OS带来很多创新功能，比如上滑APP出卡片，快速获取信息；
鸿蒙语言基础类库：【@ohos.util.ArrayList (线性容器ArrayList)】
2301_76813281的博客
07-09 912
本模块首批接口从API version 8开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。点击或者复制转到。ArrayList是一种线性数据结构，底层基于数组实现。ArrayList会根据实际需要动态调整容量，每次扩容增加50%。ArrayList和[Vector]相似，都是基于数组实现。它们都可以动态调整容量，但Vector每次扩容增加1倍。ArrayList和[LinkedList]相比，ArrayList的随机访问效率更高。
【HarmonyOS NEXT】鸿蒙 代码混淆
wu1004019946的博客
07-10 1044
针对工程源码的混淆可以降低工程被破解攻击的风险，缩短代码的类与成员的名称，减小应用的大小。DevEco Studio提供代码混淆的能力并默认开启，API 10及以上版本的Stage模型、编译模式为release时自动进行代码混淆。
LiteOS增加执行自定义源码
jklinux的博客
07-10 307
鸿蒙系统源码是通过目录下的BUILD.gn描述当前源码如何编译，则有哪些源文件，及使用的头文件路径。复制iothardware目录下的BUILD.gn到myhello目录下。基中：myhello_demo为编译的目标名, sources指定当前目标由哪些源文件组成, include_dirs指定源码中使用的头文件所在路径。重新ReBuild工程后，upload烧录并打开monitor后即可接收开发板里输出的信息。新建myhello目录后，再此目录下再新建源文件myhello_demo.c。
鸿蒙语言基础类库：【@ohos.util (util工具函数)】
2301_76813281的博客
07-09 1263
本模块首批接口从API version 7开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。点击或者复制转到。该模块主要提供常用的工具函数，实现字符串编解码（TextEncoder，TextDecoder）、有理数运算（RationalNumber）、缓冲区管理（LruBuffer）、范围判断（Scope）、Base64编解码（Base64）、内置对象类型检查（Types）等功能。
鸿蒙系统在服装RFID管理中的应用：打造智能零售新时代
最新发布
RFID_Sharona的博客
07-13 216
鸿蒙系统结合RFID技术，助力服装行业智能化升级，实现高效库存管理、自动化存取、全流程供应链管理，以及生产计件管理。常达智能物联提供高性能RFID解决方案，满足行业需求。
vue使用svg组件后，当前页面未使用的图片也被渲染在html中，且影响了整个页面布局
06-11
这种情况可能是因为使用了全局注册的 SVG 组件，导致所有页面都加载了 SVG 图片，从而影响了整个页面布局。解决这个问题的方法是只在需要使用 SVG 图片的组件内部注册 SVG 组件，而不是在全局注册。这样可以避免未使用的 SVG 图片被加载，同时也不会影响整个页面布局。另外，可以考虑使用懒加载技术，只有当组件需要用到 SVG 图片时才进行加载。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

脱发使我稳重

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值