DevEco美化组件（笔记）

用于美化组件的外形，使其更好看

一、外形美化

对组件的外形进行美化（组件形状、边框的改变、背景颜色的渐变等）

以一个Button作为修改对象，创建一个新的GraphicResourFile文件叫做beautify_button.xml

 在ability_main中，Button的background_element导入新建的xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">
    <Button
        ohos:height="50vp"
        ohos:width="320vp"
        ohos:text="确认"
        ohos:text_size="35fp"
        ohos:background_element="$graphic:beautify_button"/>

</DirectionalLayout>

形状与边框

 beautify_button.xml中可以填写如下代码

<?xml version="1.0" encoding="utf-8"?>
<shape
    ohos:shape="rectangle"
    xmlns:ohos="http://schemas.huawei.com/res/ohos">
    <!--设置边框-->
    <!--颜色、粗细-->
    <stroke
        ohos:color="#21A8FD"
        ohos:width="10vp"/>
    <!--设置圆角-->
    <!--顶点到弧度的最小距离-->
    <corners
        ohos:radius="15vp"/>
</shape>

背景色的设置

单色

<solid
        ohos:color="#FFFF66"/>

 多色

<solid
        ohos:colors="#FF0000,#00FF00,#0000FF"/>

 渐变效果

需要多色状态

<gradient
        ohos:shader_type="radial_gradient"/>

 

边框每一个边的设置

可以单独设置上下左右的边框，但在使用时，似乎没有起作用。

<bounds
        ohos:bottom="20vp"/>

二、状态美化

依据组件在不同状态下的外形美化

• 默认状态（关闭状态）
• 按下状态
• 选中状态（开启状态）
• 等

新建一个文件beautify_button_state.xml美化文件

 将ohos:background_element的元素改变

<Button
        ohos:height="50vp"
        ohos:width="320vp"
        ohos:text="确认"
        ohos:text_size="35fp"
        ohos:background_element="$graphic:beautify_button_state"/>

 状态设置中，上方设置生效会覆盖下方设置，因此，默认状态需要放在最后面。

 同时，element也可以引入之前shape文件中的设置

<?xml version="1.0" encoding="utf-8"?>
<state-container
    xmlns:ohos="http://schemas.huawei.com/res/ohos">
    <!--默认状态-->
    <item ohos:state="component_state_pressed" ohos:element="$graphic:beautify_button"/>
    <item ohos:state="component_state_empty" ohos:element="#FF0000"/>

</state-container>