第3章
界面设计
HarmonyOS应用程序的Java工程通常用xml格式的页面布局文件设计用户界面,
HarmonyOS应用程序的JS工程通常用hml格式的页面布局文件和css格式的页面样式文
件设计用户界面。为了让开发者能够以最快的速度设计出美观、具有动态效果的JS工程用
户界面,本章结合实际案例的开发过程介绍JS工程的常用样式和flex弹性布局。
3.1 样式
css是一种用来表现html或xml等文档样式的语言。css不仅可以静态地修饰用html
或xml标识的页面,还可以配合各种脚本语言动态地对页面上的各个元素进行格式化。css
能对页面中元素位置的排版进行像素级精确控制,支持几乎所有的字体、字号样式,拥有对
页面对象和模型样式编辑的能力。为了方便应用程序的页面开发,在HarmonyOS应用程
序开发框架中引入了传统css的大部分特性,同时为了更适合开发HarmonyOS应用程序,
也对传统的css进行了扩充和修改,让css修饰的hml页面结构更丰富、更灵活。
3.1.1 尺寸单位
1.逻辑像素px
应用程序配置文件(config.json)的window选项用于定义与显示窗口相关的配置,其代
码格式如下。
1 {
2 ......
3 "window": {
4 "designWidth": 720,
5 "autoDesignWidth": true
6 }
7 ...
8 }
designWidth属性用于指定屏幕逻辑宽度。默认状态下,手机和智慧屏设备的逻辑宽
扫一扫
4
9
度为720px,智能穿戴设备的逻辑宽度为454px。所有与尺寸大小相关的样式(如width、
font-size)都以designWidth属性值和实际屏幕宽度的比例进行缩放。例如,如果在配置文
件中指定designWidth属性值为720,而样式文件中设置的width值为100px,则在实际宽
度为1440物理像素的设备屏幕上,width的实际渲染像素值为200物理像素,也就是从
720px到1440物理像素,所有尺寸大小放大2倍。
autoDesignWidth属性用于指定渲染组件和布局时是否按屏幕密度进行缩放,如果该
属性值为true,则设置的designWidth属性值会被忽略,屏幕逻辑宽度由设备宽度和屏幕密
度自动计算得出,在不同设备上可能不同。例如,样式文件中设置的width值为100px,在
屏幕密度为3的设备上,实际渲染像素值为300物理像素。
2.百分比
组件的尺寸单位用百分比表示时,表示该组件占父组件尺寸的百分比。例如,如果组件
的width属性值设置为50%,则代表该组件渲染时在页面上的宽度为其父组件宽度的
一半。
3.2
通用样式
1.
HarmonyOS应用程序开发框架所支持的通用样式与传统cs
样式类似,为方便读者阅
读和理解本书的范例代码,表3.扫一扫
1中列出了部分常用的通用样式和功能说明。
表3.常用的通用样式和功能说明
1
样式属性功能描述示例代码
color 设置前景色例如,color:yelow表示设置前景色为黄色
background-color 设置背景色例如,background-color:yelow表示设置背景色为黄色
font-size 设置字体大小例如,font-size:25px表示设置字体大小为25px
border 设置边框线例如,border:5pxsolidred表示设置边框线宽度为5px、红色
margin 设置外边距
例如,margin:15px5px25px10px表示设置上、右、下和左侧的外
边距
padding
width
设置内边距
设置宽度
例如,padding:15px5px25px10px表示设置上、右、下和左侧的
内边距
例如,width:50%表示设置宽度占容器宽度的50%
height 设置高度例如,height:200px表示设置高度为200px
在cs
中,可以通过使用预定义的颜色名称、RGB 、RGBA或HEX的值指定颜色。例
如,d、0)、#FF0000等颜色值表示指定颜色为红色,5)、
rergb(255,0,rgba(255,0,0,0.
#55FF0000等颜色值表示指定颜色为透明红色。
3.3
样式使用
1.
在页面布局文件中,通常用style、clas
属性控制组件的样式。style属性声明的样式也扫一扫
50
称为内联样式。应用程序的每个页面目录下都有一个与页面布局文件同名的样式文件,用
来描述该页面布局文件中组件的样式,决定组件应该如何显示。
【范例3-1】 用style属性设置text组件的前景色为红色,背景色为黄色。
hml的代码如下:
1 <div>
2 <text style="color: red;background-color: yellow;">HarmonyOS 应用开发
</text>
3 </div>
【范例3-2】 用class属性设置text组件的前景色为红色,背景色为黄色。
css的代码如下:
1 .textcolor{
2 color: red;
3 background-color: yellow;
4 }
hml的代码如下。
1 <div>
2 <text class="textcolor">HarmonyOS 应用开发</text>
3 <div>
3.1.4 动画样式
HarmonyOS应用程序开发框架从APIversion4开始支持动画效果hml元素,动画效
果可以让hml元素逐渐从一种样式变为另一种样式。在使用css样式设置动画时,必须首
先用@keyframes为动画指定一些关键帧。表3.2列出了部分常用的动画样式属性和功能
说明。
表3.2 常用的动画样式属性和功能说明
样式属性功能描述示例代码
animation-name 设置动画关键帧名称
例如,animation-name:example表示设置动画关键帧
名称为example,example必须在样式文件中已定义
animation-delay 设置动画播放的延迟
时间
例如,animation-delay:4s表示设置动画在4s后播放,
单位为ms(毫秒,默认)、s(秒)
animation-duration 设置动画播放的持续
时间
例如,animation-duration:4s表示设置动画播放持续
4s,单位为ms(毫秒,默认)、s(秒)
animation-iteration-count 设置动画播放的次数
例如,animation-iteration-count:infinite表示设置动画
播放无限次,默认播放1次
续表
5 1
样式属性功能描述示例代码
transform 设置平移/旋转/缩放
等动画效果
例如,transform:translateX(250px)表示设置沿X 轴
方向移至250px的平移动画;例如,transform:rotate
(90deg)表示设置顺时针旋转90°的旋转动画;例如,
transform:scaleY(4)表示沿Y 轴方向放大至4倍的
缩放动画;例如,transform:skewX(80deg)表示设置逆
时针倾斜80°的倾斜动画
【范例3-3】 设置显示HelloWorld! 的text组件背景色从红色变为黄色,并且具有从
0°~90°~180°顺时针旋转和逐渐放大的动画效果。
hml的代码如下。
1 <div class="container">
2 <text class="title">
3 Hello World!
4 </text>
5 </div>
css的代码如下。
1 .container {
2 display: flex;
3 justify-content: center;
4 align-items: center;
5 width: 454px;
6 height: 454px;
7 }
8 .title {
9 background-color: red;
10 width: 200px;
11 height: 200px;
12 animation-name: example; /*指定动画关键帧名称*/
13 animation-duration: 4s; /*动画播放时间为4 秒*/
14 animation-iteration-count: infinite; /*动画播放无限次*/
15 text-align: center;
16 }
17 @keyframes example { /*定义关键帧,名称为example */
18 from { /*开始关键帧样式*/
19 background-color: red;
20 transform: rotate(0deg) scale(1.0);
21 }
22 50% { /*通过百分比指定动画运行的中间状态关键帧样式*/
23 background-color: white;
24 transform: rotate(90deg) scale(1.2);
25 }
52
26 to { /*终止关键帧样式*/
27 background-color: yellow;
28 transform: rotate(180deg) scale(1.5);
29 }
30 }
上述第18~21行代码定义动画起始帧的text组件背景色为红色、旋转角度为0°、放大倍
数为1倍;第22~25行代码定义动画运行至50%时的关键帧样式,也可以不定义;第26~29
行代码定义动画终止帧的text组件背景色为黄色、旋转角度为180°、放大倍数为1.5倍。
3.1.5 渐变样式
HarmonyOS应用程序开发框架从APIversion4开始支持线性渐变(linear-gradient)
和重复线性渐变(repeating-linear-gradient)两种渐变效果,实现两个或多个指定颜色间的
平稳过渡。使用渐变样式,需要定义过渡方向和过渡颜色,也就是要指定direction参数、
angle参数和color参数的值,表3.3列出了这3个参数的使用说明。
表3.3 direction、angle和color参数的使用说明
参数名称默 认 值使用说明
direction tobottom(由上
至下渐变)
指定过渡方向,参数值格式:to[left|right]||[top|bottom]。如:toleft
(从右向左渐变),tobottomright(从左上角到右下角渐变)
angle 180deg(180°) 指定过渡方向,以组件几何中心为坐标原点,水平方向为X 轴,angle指
定了渐变线与Y 轴顺时针方向的夹角
color 无
指定使用渐变样式区域内颜色的渐变效果,至少指定两种颜色,参数值
格式:#FF0000、#FFFF0000、rgb(255,0,0)或rgba(255,0,0,1)
【范例3-4】 设置显示HelloWorld! 的text组件在距离左边27px和距离左边227px
(454×0.5)之间200px宽度形成渐变效果。
将范例3-3的css代码替换为如下代码。
1 .title {
2 font-size: 30px;
3 text-align: center;
4 width: 200px;
5 height: 200px;
6 background: linear-gradient(to right, rgb(255, 0, 0) 27px, rgb(0, 255, 0)
50%);
7 }
上述第6行代码linear-gradient()方法用于设置线性渐变,toright表示渐变方向从左
向右,rgb(255,0,0)27px表示距左边27px开始为红色效果,rgb(0,255,0)50%表示距
左边227px(454×50%)处开始渐变为绿色效果。如果要实现从左向右重复渐变,重复渐变
区域30px(60px-30px),则需要将上述第6行代码修改为如下代码。
5 3
1 background: repeating- linear- gradient(to right, rgb(255, 255, 0) 30px,rgb
(0, 0, 255) 60px);
3.2 flex布局
flex的英文全称为FlexibleBox,中文含义为弹性盒子布局,它是一种布局模型。采用
flex布局的元素,称为flex容器(flexcontainer,简称“容器”)。flex容器中的所有子元素,
称为flex项目(flexitem,简称“项目”)。flex布局的坐标系是以容器左上角的点为原点,自
原点向右、向下有两个坐标轴,即一个主轴(mainaxis)和一个交叉轴(crossaxis),交叉轴与
主轴互相垂直。主轴的开始位置(与边界的交叉点)称为主轴起点(mainstart),主轴的结束
位置称为主轴终点(mainend);交叉轴的开始位置(与边界的交叉点)称为交叉轴起点
(crossstart),交叉轴的结束位置称为交叉轴终点(crossend)。项目默认沿主轴方向排列,
单个项目占据的主轴空间称为mainsize,单个项目占据的交叉轴空间称为crosssize。flex
默认布局中自原点向右的坐标轴为主轴,自原点向下的坐标轴为交叉轴,如图3.1所示。
图3.1 flex默认布局模型
3.2.1 容器的属性
1.flex-direction属性
flex-direction属性用于设置容器的主轴方向,主轴方向决定了项目在容器中的摆布方
式,它的属性值包含row和column。
(1)row:主轴为自左向右的水平方向,默认值,即项目按水平方向(行方向)从左到右
排列。
扫一扫
54
(2)column:主轴为自上向下的垂直方向,即项目按垂直方向(列方向)从上到下排列。
【范例3-5】 用flex-direction属性实现如图3.2所示效果。
css的代码如下。
1 .container {
2 display: flex;
3 flex-direction: row;
4 width: 100%;
5 height: 100%;
6 }
7 .item {
8 background-color: blueviolet;
9 border: 1px solid yellow;
10 font-size: 20px;
11 text-align: center;
12 width: 80px;
13 height: 100px;
14 }
hml代码如下。
1 <div class="container">
2 <text class="item">
3 item1
4 </text>
5 <text class="item">
6 item2
7 </text>
8 <text class="item">
9 item3
10 </text>
11 </div>
如果将上述css代码的flex-direction属性值修改为column,则显示如图3.3所示的
效果。
图3.2 row 显示效果
图3.3 column显示效果
2.flex-wrap属性
flex-wrap属性用于设置容器中的项目是否换行,它的属性值包含nowrap和wrap。
(1)nowrap:不允许项目换行,默认值。如果所有项目按主轴方向排列时超过了容器
的宽度或高度,则每个项目的宽度或高度会自动沿主轴方向压缩;如果压缩后仍然超过容器
的宽度或高度,则超过的项目不显示。例如,在范例3-5的hml代码的第10行下再增加3
个显示item*的tex其显示效果如图3.
t组件,4所示。
(2)wrap:允许项目换行。如果所有项目按主轴方向排列时超过了容器的宽度或高
度,则超过容器宽度或高度的项目会另起一行或一列。例如,在范例3-5的cs
代码中增加fle(“) x-wrap:wrap;代(”) 码,在hml代码的第10行下再增加3个显示item*的text组件,其
显示效果如图3.
5所示。
图3.4
nwa图3.wa
orp显示效果
5
rp显示效果
3.justify-cott属性
justify-content(n) 属(e) 性用于设置项目在主轴方向的对齐方式及分配项目与项目之间、(n) 多余
空间的间隙,它的属性值包含flex-start、center、flex-end、space-betwen 、space-around和
space-evenly。
(1)flex-start:默认值,项目与主轴的起点对齐,项目间不留间隙。如果主轴为水平方
向,则容器中的项目左对齐;如果主轴为垂直方向,则容器中的项目顶端对齐。
(2)center:项目在主轴方向居中对齐,项目间不留间隙。例如,在范例3-5的cs
代码
中增加“jutf-otncne代(”) 其显示效果如图3.
siycnet:etr;码,6所示。
(3)flex-end:项目与主轴的终点对齐,项目间不留间隙。如果主轴为水平方向,则容
器中的项目右对齐;如果主轴为垂直方向,则容器中的项目底端对齐。例如,在范例3-5的
cs
fjsiy-otnlxed;代(”) 码,7所示。
代码中增加“utfcnet:fe-n其显示效果如图3.
(4)space-betwen:项目沿主轴方向均匀分布,两端的项目与容器的起点、终点对齐,
并且项目间的间隙相等。例如,在范例3-5的cs
代码中增加“justify-content:spacebetwen;”代码,8所示。
其显示效果如图3.
(5)space-around:项目沿主轴方向均匀分布,两端的项目与容器的起点、终点的间隙
是项目与项目之间间隙的一半。例如,在范例3-5的cs
代码中增加“justify-content:
space-around;代(”) 其显示效果如图3.
码,9所示。
图3.r显示效果图3.d显示效果
6
cente7
flex-en
图3.
en显示效果图3.d显示效果
8
space-betw9
space-aroun
(6)space-evenly:项目沿主轴方向均匀分布,每个项目之间的间隔相等。
4.align-items属性
align-items属性用于设置项目在交叉轴方向的对齐方式,它包含stretch、flex-start、
center、flex-end和baseline5个属性值。
(1)stretch:项目在交叉轴方向被拉伸到与容器相同的高度或宽度。
(2)flex-start:项目与交叉轴的起点对齐。
(3)center:项目在交叉轴方向居中对齐。
(4)flex-end:项目与交叉轴的终点对齐。
(5)baseline:项目与基线对齐。如果主轴为垂直方向,则该值与flex-start等效;如果
主轴为水平方向,则项目上的文本内容按文本基线对齐,否则底部对齐。
3.2
项目的属性
2.
扫一扫
1.flex-grow
属性
flex-grow属性用于设置项目在容器主轴方向上剩余空间的拉升比例,默认值为0(表
示项目不拉升)。如果所有项目的flex-grow属性值相等,则它们将等分剩余空间。该属性
5 7
仅对div、list-item、tabs、refresh、stepper-item 等容器组件生效。例如,将范例3-5的hml代
码修改为如下代码,其显示效果如图3.10所示。
1 <div class="container">
2 <text class="item" style="flex-grow : 1;">
3 item1
4 </text>
5 <text class="item" style="flex-grow : 2;">
6 item2
7 </text>
8 <text class="item" style="flex-grow : 1;">
9 item3
10 </text>
11 </div>
上述代码表示按1∶2∶1的比例分配剩余空间显示item1、item2和item3这三个text
组件,即item1拉升四分之一剩余空间,item2拉升四分之二剩余空间,item3拉升四分之一
剩余空间。
2.flex-shrink属性
flex-shrink属性用于设置项目在容器主轴方向上的收缩比例,但只有当项目的默认宽
度之和大于容器的宽度时才会发生收缩,默认值为1(表示等比收缩项目)。如果flexshrink
属性值为0,表示项目不收缩。该属性仅对div、list-item、tabs、refresh、stepper-item
等容器组件生效。
3.flex-basis属性
flex-basis属性用于设置项目在主轴方向上的初始宽度或高度值。如果width 或
height与flex-basis属性同时设置时,项目初始宽度或高度由flex-basis属性决定。该属性
仅对div、list-item、tabs、refresh、stepper-item 等容器组件生效。例如,将范例3-5的hml代
码修改为如下代码,其显示效果如图3.11所示。
图3.10 flex-grow 显示效果
图3.11 flex-basis显示效果
1 <div class="container">
2 <text class="item" >
58
3 item1
4 </text>
5 <text class="item" style="flex-basis: 30px;">
6 item2
7 </text>
8 <text class="item" style="flex-basis: 180px;">
9 item3
10 </text>
11 </div>
上述代码表示显示item1的text组件大小由width属性值决定,显示item2和item3
的text组件大小由flex-basis属性值决定。
4.align-self属性
align-self属性用于设置项目在容器交叉轴上的对齐方式,该属性会覆盖容器的alignitems
属性,仅当容器为div、list组件时生效。它包含stretch、flex-start、flex-end、center和
baseline5个属性值,其功能含义与align-items属性一样,限于篇幅,这里不再赘述。
5.position属性
position属性用于设置项目的定位类型,不支持动态变更。它的属性值包含fixed、
absolute和relative,但absolute属性仅当容器为div、stack组件时生效。项目在页面上用
top属性(离容器顶部的距离)、bottom 属性(离容器底部的距离)、left属性(离容器左侧的
距离)和right属性(离容器右侧的距离)进行定位,但是,只有设置了position属性,它们才
能生效。根据不同的position值,它们的工作方式也不同。
(1)fixed(固定定位):相对于整个界面窗口进行固定定位,即项目按照设置的top、
right、bottom 和left属性值进行固定定位,即使是滚动页面,项目也始终位于同一位置,其
余项目会根据该项目通常应放置位置上留出的空隙进行调整来适应窗口尺寸。例如,将某
个项目放在界面窗口右下角的css代码如下。
1 .info_position{
2 position: fixed;
3 bottom: 0px; /*离窗口底部距离为0*/
4 right: 0px; /*离窗口右侧距离为0*/
5 }
(2)absolute(绝对定位):相对于父容器进行定位,即设置项目的top、right、bottom 和
left属性值相对于最近的父容器进行定位,而不是相对于界面容器定位,其余项目不会根据
该项目通常应放置位置上留出的空隙进行调整来适应窗口尺寸。如果绝对定位的项目没有
祖先容器对象,则它会随页面滚动一起移动。
(3)relative(相对定位):相对于其正常位置进行定位,即设置项目的top、right、bottom
和left属性值将导致项目偏离其正常位置进行调整,其余项目不会根据该项目通常应放置
位置上留出的空隙进行调整来适应窗口尺寸。
6.z-index属性
z-index属性用于设置同一父节点中子节点的渲染顺序,该属性值越大,渲染效果越
靠后。
本章小结
用户界面是系统和用户之间进行交互和信息交换的媒介,好的界面设计不仅能让应用
程序变得有个性、有品位,还能让应用程序的操作变得舒适、简单,且能充分体现应用程序的
定位和特点。本章首先详细介绍了尺寸单位、通用样式、动画样式及渐变样式的定义和使用
方法,然后结合实际案例阐述了flex布局中容器属性和项目属性的使用方法,以便读者设
计符合要求的用户界面。