大家好，我是中原工学院的李原锋，下面是我鸿蒙大作业的内容：
一、前言
大家都知道，要想把软件做好，那么软件的美化也是必不可少的，我们在设计一个软件时，要把布局弄的简单明了美观，这样才更方便使用者的实用。
二、用户界面
1. 首先我们要了解应用界面的构成，应用的Ability在屏幕上将显示一个用户界面，该界面用来显示所有可被用户查看和交互的内容。
2. 应用中所有的用户界面元素都是由组件和布局构成。组件是绘制在屏幕上的一个对象，用户能与之交互。布局是一个用于容纳其他组件和布局对象的容器。
三、常用布局
1、方向布局 - DirectionLayout
水平或垂直布局，相当于安卓的线性布局（LinearLayout）
DirectionalLayout用于将一组组件 (Component) 按照水平或者垂直方向排布。使用orientation设置布局内组件的排列方式，可设置为horizontal（水平）或者vertical（垂直），默认为vertical。
DirectionalLayout不会自动换行，其子组件会按照设定的方向依次排列，若超过布局本身的大小，超出布局大小的部分将不会被显示。
组件使用layout_alignment控制自身在布局中的对齐方式。
– 水平排列时，可设置为top、bottom、horizontal_center、center
– 垂直排列时，可设置为left、right、vertical_center、center
2、依赖布局 - DependentLayout
组件可以指定相对于其他同级元素的位置，或相对于父组件的位置，相当于安卓的相对布局（RelativeLayout）
DependentLayout中每个组件可以指定相对于其他同级组件的位置，或相对于父组件的位置。
（1）相对于同级组件常用布局方式
– end_of：将起始边与另一个子组件的结束边对齐，效果如下图所示
– below：将上边缘与另一个子组件的下边缘对齐，效果如下图所示
– above、start_of、left_of、right_of 等参数可分别实现类似的布局
（2）相对于父组件常用布局方式
align_parent_left、align_parent_bottom等，且可以进行组合，形成处于左上角、左下角、右上角、右下角布局。效果如下图所示：
3、层叠布局 - StackLayout
视图以层叠的方式显示，相当于安卓的帧式布局（FrameLayout）
StackLayout直接在屏幕上开辟出一块空白的区域，添加到这个布局中的视图都是以层叠的方式显示，而它会把这些视图默认放到这块区域的左上角，第一个添加到布局中的视图显示在最底层，最后一个被放在最顶层。上一层的视图会覆盖下一层的视图。效果如下图所示：
使用layout_alignment属性可以指定组件在布局中的相对位置
– top、bottom、left、right四种，代表上下左右
– horizontal_center、vertical_center、center三种居中方式
使用moveChildToFront(Component)方法可以将子视图从底层移到顶层显示，效果如调图所示：
4、表格布局 - TableLayout
使用表格的方式划分子组件，相当于安卓的表格布局（TableLayout）
常用属性
– alignment_type：对齐方式，可设置为：align_edges（按边界对齐）或align_contents（按边距对齐）；
– orientation：排列方向，可设置为：horizontal（水平）或vertical（垂直）。
– column_count：列数；
– row_count：行数；
默认一列多行，效果如下图所示
设置行数和列数为2后效果如下图所示
四、组件美化
组件的美化主要分为形状美化和状态美化。
- 形状美化：很简单啦，默认的按钮是方形的，但是背景透明，看不见。形状美化不仅仅包含了形状，也包含了背景颜色！
- 状态美化：例如，按钮按下去的颜色和没有按下去的颜色，这对应两种不同的状态，就有了状态美化。
1.形状美化
子标签：
stroke：边框设置
color：颜色
width：宽度
bounds：边框设置【这个后续再用，和 solid 搭配】
top、right、left、bottom：上下左右单独设置。
gradient：渐变背景【需要配合子标签 solid 使用】
shader_tyoe：有三个值
sweep_gradient：（暂时没有效果，我还不清楚…）
radial_gradient：辐射渐变，solid 中需要使用多个颜色。
linear_gradient：线性渐变
solid：背景色
color：颜色
colors：多个颜色，需要逗号隔开，ohos:colors="#009911,#889977"
corners：设置圆角
radius：四个角同时设置，同理：left_top_y；left_top_x；left_bottom_y；left_bottom_x；right_bottom_y；right_bottom_x；right_top_y；right_top_x，是分别设置每一个角的圆角程度。
示例：
button组件代码：
输出结果：
2.状态美化：
根标签：state-container
子标签：
item
state
component_state_checked：开启状态
component_state_pressed：按下不松开的状态
component_state_empty：默认状态（必须要写在最下面）
element：可写颜色；可添加图片资源
代码示例：
效果如下：
五、总结
以上便是我对于鸿蒙页面美化的总结，对于页面的布局，我们应当按照软件需求选择正确的页面布局，并了解不同页面布局的优势与缺陷，同时，组件的美化也是必不可少的，组件的美化可以帮助我们在使用时更加的顺畅，同时对我们流畅实用软件更方便，而且更正确的页面布局可以使我们的使用过程更简单易懂，面向的人群也更加广阔。
