鸿蒙图片、布局元素、信息标记组件Badge

图片资源存放目录

HarmonyOS鸿蒙的图片存放地址在：entry\src\main\resources\base\media中
我们可以通过：$r('app.media.图片名称') 获取图片

1. @Entry
2. @Component
3. struct Index {
4.   @State imgSrc: string =  'https://i2.hdslb.com/bfs/archive/458ffba947db17ce7cd048fb43926a3955db7eb2.jpg@672w_378h_1c_!web-search-common-cover.png';
5.   build() { // 表示开始进行构建界面
6.     Column(){ // Column(列) 使用之后，里面的元素默认是水平居中的，解决办法子元素设置 width
7.       Row() {
8.         // 引入网络图片
9.         Image(this.imgSrc).width('100%')
10.       }
11.       Row() {
12.         // 引入本地图片
13.         Image($r('app.media.hongmeng')).width('100%')
14.       }
15.     }
16.   }
17. }

复制代码

或者这样去写

2张图片的宽度设置为100%

1. @Entry
2. @Component
3. struct Index {
4.   @State imgSrc: string =  'https://i2.hdslb.com/bfs/archive/458ffba947db17ce7cd048fb43926a3955db7eb2.jpg@672w_378h_1c_!web-search-common-cover.png';
5.   build() { // 表示开始进行构建界面
6.     Column(){ // Column(列) 使用之后，里面的元素默认是水平居中的，解决办法子元素设置 width
7.       Row() {
8.         // 引入网络图片
9.         Image(this.imgSrc).width('100%')
10.         Image(this.imgSrc).width('100%')
11.       }
12.       Row() {
13.         // 引入本地图片
14.         Image($r('app.media.hongmeng')).width('100%')
15.       }
16.     }
17.   }
18. }

复制代码

svg图标

鸿蒙OS图标库地址：
https://developer.huawei.com/consumer/cn/design/harmonyos-symbol/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/DEVELOPERS0115.svg
当然你也可以使用第三方的图标库，如:阿里的图标库。
先把图标下载存为SVG，然后放在entry\src\main\resources\base\media中。
与图片的存放地址是一样的哈

1. @Entry
2. @Component
3. struct Index {
4.   build() { // 表示开始进行构建界面
5.     Column(){ //Column(列) 使用之后，里面的元素默认是水平居中的，解决办法子元素设置 width
6.       Row() {
7.         Column(){
8.           Image($r('app.media.mess')).width(30)
9.         }.width('25%')
10.         Column(){
11.           Image($r('app.media.person')).width(30)
12.         }.width('25%')
13.         Column(){
14.           Image($r('app.media.discover')).width(30)
15.         }.width('25%')
16.         Column(){
17.           Image($r('app.media.history')).width(30)
18.         }.width('25%')
19.       }.width('100%')
20.     }
21.   }
22. }

复制代码

给文字设置背景图

1. // 给文字设置背景图
2. Text('我是文字').width(100).height(100).fontColor('#000').backgroundImage($r('app.media.hua'))

复制代码

图片是否平铺

语法：backgroundImage（图片地址，是否平铺：默认不平铺）

1. // 图片在水平方向上平铺
2. Text('我是文字').width(500).height(100).fontColor('#000').backgroundImage($r('app.media.hua'), ImageRepeat.X)

复制代码

背景图片显示不出来需要注意的点

1,地址是否正确的。
2,是否给Text设置了宽高。如果不设置的话，是显示不出来的哈
设置背景图片的位置

1. Text().width('100%').height(100).fontColor('#000').backgroundColor(Color.Pink)
2.    .backgroundImage($r('app.media.hua'))
3.    .backgroundImagePosition({x:0, y:0}) // x的位置和y的位置

复制代码

1. Text().width('100%').height(100).fontColor('#000').backgroundColor(Color.Pink)
2.   .backgroundImage($r('app.media.hua'))
3.   .backgroundImagePosition(Alignment.Center) //水平垂直方向上居中

复制代码

backgroundImagePosition的取值还有这些

Alignment.TopStart（左顶点）、Alignment.Top（在顶部，左右对齐）、Alignment.TopEnd(右顶点）
Alignment.Start（左对齐，上下居中）、Alignment.Center（水平，垂直方向上居中）、Alignment.End（在右边，垂直方向上居中）Alignment.BottomStart（左边底部）、Alignment.Bottom（在底部，左右对齐）、Alignment.BottomEnd（右边底部）
backgroundImageSize 设置背景图片

1. Text().width('100%').height(100).fontColor('#000').backgroundColor(Color.Pink)
2.   .backgroundImage($r('app.media.hua'))
3.   .backgroundImageSize({ height:100, width:100 }) // 设置背景图片的宽和高

复制代码

ImageSize 图片缩放的枚举值

ImageSize.Contain:等比例缩放背景图，当宽或高与组件尺寸相同停止缩放（可能存在留白）
ImageSize.Cover:等比例缩放背景图至图片完全覆盖组件范围(不会留白,但是有可能会让图片显示不全)
ImageSize.Auto:默认，原图尺寸

布局元素的组成

一般有：内容,padding,border,margin这4部分组件。
padding会撑大内容(与css一样)
如下图：借用一张网络图片

padding（会撑大内容）

1. @Entry
2. @Component
3. struct Index {
4.   build() { // 表示开始进行构建界面
5.     Column() { //Column(列) 使用之后，里面的元素默认是水平居中的，解决办法子元素设置 width
6.       Row() {
7.         // padding(10) 4个方向的间距都是10
8.         Text('hello world').backgroundColor(Color.Pink).padding(10).height(40)
9.         // padding({ left: 20, right:20 }) 表示左右间距是20px
10.         Text('hello world').backgroundColor(Color.Red).padding({ left: 20, right:20 }).height(40)
11.       }
12.     }
13.   }
14. }

复制代码

外边距 margin

1. @Entry
2. @Component
3. struct Index {
4.   build() { // 表示开始进行构建界面
5.     Column() { //Column(列) 使用之后，里面的元素默认是水平居中的，解决办法子元素设置 width
6.       Row() {
7.         // padding(10) 4个方向的间距都是10
8.         Text('hello world').backgroundColor(Color.Pink).padding(10).height(40).margin({left:10})
9.         // padding({ left: 20, right:20 }) 表示左右间距是20px
10.         Text('hello world').backgroundColor(Color.Red).padding({ left: 20, right:20 }).height(40).margin({left:10})
11.       }
12.     }
13.   }
14. }

复制代码

外边距 margin

1. @Entry
2. @Component
3. struct Index {
4.   build() { // 表示开始进行构建界面
5.     Column() { //Column(列) 使用之后，里面的元素默认是水平居中的，解决办法子元素设置 width
6.       Row() {
7.         // padding(10) 4个方向的间距都是10
8.         Text('hello world').backgroundColor(Color.Pink).padding(10).height(40).margin({left:10})
9.         // padding({ left: 20, right:20 }) 表示左右间距是20px
10.         Text('hello world').backgroundColor(Color.Red).padding({ left: 20, right:20 }).height(40).margin({left:10})
11.       }
12.     }
13.   }
14. }

复制代码

边框：border

1. @Entry
2. @Component
3. struct Index {
4.   build() { // 表示开始进行构建界面
5.     Column() { //Column(列) 使用之后，里面的元素默认是水平居中的，解决办法子元素设置 width
6.       Row() {
7.         Text('登录').fontColor(Color.Red).border({
8.           width:1, // 线宽(必须)
9.           color: Color.Red, // 颜色
10.           style:BorderStyle.Solid // 线的类型 枚举值
11.         }).padding(10).height(40).margin({left:10, right:10})
12.         Text('注册').border({
13.           width:{
14.             top:1, // 顶部边框
15.             bottom:1 // 底部的边框
16.           }, // 线宽(必须)
17.           color: {
18.             top: Color.Brown, //顶部边框的颜色
19.             bottom: '#FB7299' //底部边框的颜色
20.           },
21.           style:BorderStyle.Solid // 线的类型 枚举值
22.         }).padding(10).height(40).margin({left:10, right:10})
23.       }
24.     }
25.   }
26. }

复制代码

圆角 borderRadius(10)

borderRadius(10): // 4个方向上都是10
borderRadius({
topLeft:10, //左上角
topRight:10, // 右上角
bottomLeft: 10, // 左下角
bottomRight:10 // 右下角
})
设置正圆

1. // 设置正圆，宽度和高度一样，圆角是宽度和高度的一半。
2. Text('正圆').width(100).height(100).backgroundColor(Color.Green).borderRadius(50)

复制代码

设置胶囊按钮

1. // 设置胶囊按钮，圆角是高度的一半,文字水平居中
2. Text('胶囊按钮').width(100).height(40).textAlign(TextAlign.Center).backgroundColor(Color.Pink).borderRadius(20)

复制代码

登录页面

通过上面我们学习的知识 一起来做一个登录界面复习一下

1. @Entry
2. @Component
3. struct Index {
4.   @State UserImgSrc: string =  'https://p9-passport.byteacctimg.com/img/user-avatar/473f3e32c874a82e2cf6f844ba77e362~160x160.png';
5.   @State userImgWidth: number  = 60
6.   build() {
7.     // Column(列) 使用之后，里面的元素默认是水平居中的
8.     Column({space:20}){ // 列中的子元素垂直方向是20的间距
9.       Row(){
10.         // 设置图片的宽高，并且设置为圆形
11.         Image(this.UserImgSrc).width(this.userImgWidth).borderRadius(this.userImgWidth/2)
12.       }.margin({ top: 20 }).margin({ bottom:20}) //距离上一个元素和下一个元素之间的间距
14.       TextInput({ placeholder:'请输入用户名称' })
16.       TextInput({
17.         placeholder: '请输入密码'
18.       }).type(InputType.Password)
20.       Button('登录').width('100%')
22.       Row(){
23.         Text('前往注册').margin({ right:10})
24.         Text('忘记密码')
25.       }
26.     }.width('100%').padding(20) // 左右两边的间距20
27.   }
28. }

复制代码

信息标记组件 Badge

1. @Entry
2. @Component
3. struct Index {
4.   build() {
5.    Column(){
6.       // 角标组件现在在图片上
7.       Badge({
8.         count:1011, // 角标数值,小于等于0且小于maxCount时不显示信息标记。
9.         maxCount: 199,// 最大消息数，超过最大消息时仅显示 maxCount+。如:199+
10.         position:BadgePosition.RightTop, // 角标的位置，右上角
11.         style:{
12.           fontSize:12, // 字体大小
13.           badgeSize:18,// 圆形大小
14.           badgeColor:'#FF0000' //角标的颜色
15.         }
16.       }){
17.         Image($r('app.media.siteng')).width(200)
18.       }
19.    }
20.   }
21. }

复制代码

BadgePosition枚举说明

名称值说明BadgePosition.RightTop0圆点显示在右上角。BadgePosition.Right1圆点显示在右侧纵向居中。BadgePosition.Left2圆点显示在左侧纵向居中。Badge详细信息：
https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-badge#badgeposition枚举说明
                                                                                                                               

                                                微信                                                                                                本文版权归作者所有，欢迎转载，未经作者同意须保留此段声明，在文章页面明显位置给出原文连接
                        如果文中有什么错误，欢迎指出。以免更多的人被误导。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！