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

最新推荐文章于 2024-09-10 17:36:55 发布
最新推荐文章于 2024-09-10 17:36:55 发布
阅读量1.5k 收藏 16
点赞数 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)
    }
  }
}

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

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

脱发使我稳重
关注
专栏目录
HarmonyOS鸿蒙开发指南:组件开发 svg详细介绍
sybh的博客
01-10 1169
line x1="180" x2="280" y1="500" y2="500" stroke-width="4" fill="white" stroke="black"> //窗框。 //窗框。M/m = moveto 参数x和y表示需要移动到点的x轴和y轴的坐标。
使用HarmonyOS鸿蒙设置圆角效果
JfdCoding的博客
09-24 1312
在HarmonyOS鸿蒙系统中，要实现圆角效果，可以通过使用布局属性和自定义绘制来实现。下面将详细介绍如何在HarmonyOS鸿蒙应用程序中设置圆角效果，并提供相应的源代码示例。方法中，我们创建一个矩形区域，设置背景元素的颜色和圆角半径。在这个示例中，我们将圆角半径设置为宽度的一半，以实现圆形效果。通过以上步骤，我们可以在HarmonyOS鸿蒙应用程序中实现圆角效果。首先，我们需要在布局文件中设置圆角属性。在构造函数中，我们初始化了绘制背景的画笔和形状元素，并设置背景颜色为透明。在上述代码中，我们使用了。
svg图标的使用
哆来A梦没有口袋的博客
09-10 1426
svg图标是基于XML的矢量图描述语言，它是一个可缩放的矢量图形(缩放质量不会有所损失)，可以通过css或者js进行操作。
HarmonyOS Next开发学习手册——Svg开发
maniuT的博客
07-19 535
通过设置x（x轴坐标）、y（y轴坐标）、dx（文本x轴偏移）、dy（文本y轴偏移）、fill（字体填充颜色）、stroke（文本边框颜色）、stroke-width（文本边框宽度）等属性实现文本的不同展示样式。Svg组件绘制路径时，通过Path中的M（起点）、H（水平线）、a（绘制弧形到指定位置）路径控制指令，并填充颜色实现饼状图效果。不知道需要重点掌握哪些鸿蒙应用开发知识点？通过设置width、height、x、y和viewBox属性为Svg设置宽度、高度、x轴坐标、y轴坐标和Svg视口。
HarmonyOS之将SVG文件转换为XML文件
╰つ栺尖篴夢ゞ
07-31 642
SVG（Scalable Vector Graphics）可缩放矢量图形，是一种图像文件格式。目前由于 HarmonyOS 图形渲染引擎不支持 SVG 格式图片的渲染，开发者需要将 SVG 格式的图片文件转换为 XML 格式的文件，然后在布局文件中引用转换后的 XML 文件。这样，就可以在模拟器/预览器或者设备上运行应用时，正常的渲染该图像文件。 选中应用模块，点击鼠标右键，选择 New>Svg To Xml： 选择需要转换的 SVG 文件，并命名，点击 OK 按钮开始转换： 转换成功后.
Svg 详解（一）背景
青岑的博客
04-02 3443
图片数字化背景 将图片存储为数据有两种方案。 其一为位图，也被称为光栅图。即是以自然的光学的眼光将图片看成在平面上密集排布的点的集合。每个点发出的光有独立的频率和强度，反映在视觉上，就是颜色和亮度。这些信息有不同的编码方案，在互联网上最常见的就是 RGB 。根据需要，编码后的信息可以有不同的位( bit )数——位深。位数越高，颜色越清晰，对比度越高；占用的空间也越大。另一项决定位图的精细度的...
鸿蒙HarmonyOS NEXT星河版入门到实战视频.zip
最新发布
11-07
00-鸿蒙开发环境准备.mp4 01-环境备选方案-API10-开发工具下载.mp4 ...21-设计资源-svg图标.mp4 22-布局元素的组成&内边距-padding.mp4 23-外边距-margin.mp4 .......... 配套资料 网盘文件永久链接
HarmonyOS应用开发-Svg组件体验.docx
06-05
HarmonyOS应用开发-Svg组件体验
HarmonyOS开发：路由容器Navigation的使用详解
热门推荐
软贱开发攻城狮
08-04 1万+
众所周知，HarmonyOS作为华为推出的新一代操作系统，其开发框架提供了全新的能力和组件，以支持跨平台应用开发，越来越多的开发者加入到鸿蒙应用开发中，而在HarmonyOS的应用开发中，HarmonyOS提供了一套全新的开发框架和API，路由容器Navigation扮演着至关重要的角色，它负责页面的跳转和导航控制，是应用组件化开发中不可或缺的一部分。那么这篇文章，就来详细介绍路由容器Navigation的使用方法，并通过具体的示例源码，帮助大家深入了解和学习使用。
HarmonyOS Lottie组件，让动画绘制更简单
HarmonyOSDev的博客
02-22 1959
动画是UI界面的重要元素之一，精心设计的动画能使UI界面更直观，有助于改进应用程序的外观并改善用户体验。 ArkUI开发框架为开发者提供了丰富的动画能力，如属性动画、转场动画及自定义动画等。这些动画能力帮助开发者美化了UI界面，但不适用于绘制某些比较复杂的动画，例如，属性动画主要针对动画的通用属性进行动态变化，内容动效不够丰富，且变更时需要修改或重写代码；Gif动态图放大后锯齿明显，精度越高占用存储空间越大，直接影响安装包的大小；svg动画DOM节点多开销大，缺乏与用户的交互。 因此，我们引入.
selenium查找svg元素
C'mon的博客
07-13 2285
XPath是一种用于定位XML文档中的web元素的语言，包括构成网页的HTML文档。在Selenium中，XPath是在网页上查找元素（包括SVG（可伸缩矢量图形）元素）最广泛使用的方法之一。SVG元素不同于常规HTML元素，因为它们是使用XML而不是HTML创建的。在Selenium中查找它们需要与查找HTML元素不同的方法。本文将介绍使用XPath在Selenium中定位SVG元素的步骤。我们将使用我们的硒游乐场网站来自动化SVG元素——
HarmonyOS标准填充类图标.zip
12-18
资源包括30个填充类图标
svg 属性详解：填充与边框
笔记
01-27 4069
填充与边框属性详解
svg图标最简单的使用方式
YUELEI118的博客
11-16 1419
在vue中使用svg图标，最简单的方法
vue3使用svg图标多种方式
weixin_45441173的博客
01-16 9976
vue3使用svg图标多种方式
svg矢量图标
w_t_y_y的博客
02-07 1133
一、介绍：是使用 XML来描述二维图形和绘图程序的语言，可缩放矢量图形。Internet Explorer9，火狐，谷歌Chrome，Opera和Safari都支持SVG。IE8和早期版本都需要一个插件 - 如Adobe SVG浏览器，这是免费提供的。 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 是万维网联盟的标准
改动SVG代码获得图标
力先生C#程序开发
02-19 1058
CDR操作中，经常会用到将图形旋转90度。如果要做出这样一个图标该怎么做呢？下面介绍一种方法。
【HarmonyOS】鸿蒙Arkts修改svg图标颜色【已解决】
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
03-07 2094
沉默小管 鸿蒙Arkts修改svg图标颜色
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

脱发使我稳重

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

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

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

打赏作者

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

抵扣说明：

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

余额充值