鸿蒙开发之Button按钮有哪些类型，如何通过代码设置

killads

发布于 2020-9-22 11:54

浏览

0收藏

Button类型分类

按照按钮的形状，按钮可以分为：

普通按钮
椭圆按钮
胶囊按钮
圆形按钮
其它

Button类型效果和代码

普通按钮

普通按钮和其他按钮的区别在于不需要设置任何形状，只设置文本和背景颜色即可，例如：鸿蒙开发之Button按钮有哪些类型，如何通过代码设置-鸿蒙开发者社区

<Button
    ohos:width="150vp"
    ohos:height="50vp"
    ohos:text_size="27fp"
    ohos:text="button"
    ohos:background_element="$graphic:color_blue_element"
    ohos:left_margin="15vp"
    ohos:bottom_margin="15vp"
    ohos:right_padding="8vp"
    ohos:left_padding="8vp"
/>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

椭圆按钮

椭圆按钮是通过设置background_element的来实现的，background_element的shape设置为椭圆（oval），例如：

鸿蒙开发之Button按钮有哪些类型，如何通过代码设置-鸿蒙开发者社区

<Button
    ohos:width="150vp"
    ohos:height="50vp"
    ohos:text_size="27fp"
    ohos:text="button"
    ohos:background_element="$graphic:oval_button_element"
    ohos:left_margin="15vp"
    ohos:bottom_margin="15vp"
    ohos:right_padding="8vp"
    ohos:left_padding="8vp"
    ohos:element_left="$graphic:ic_btn_reload"
/>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

胶囊按钮

胶囊按钮是一种常见的按钮，设置按钮背景时将背景设置为矩形形状，并且设置ShapeElement的radius的半径，例如：

鸿蒙开发之Button按钮有哪些类型，如何通过代码设置-鸿蒙开发者社区

<Button
    ohos:id="$+id:button"
    ohos:width="match_content"
    ohos:height="match_content"
    ohos:text_size="27fp"
    ohos:text="button"
    ohos:background_element="$graphic:capsule_button_element"
    ohos:left_margin="15vp"
    ohos:bottom_margin="15vp"
    ohos:right_padding="15vp"
    ohos:left_padding="15vp"
/>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

圆形按钮

圆形按钮和椭圆按钮的区别在于组件本身的宽度和高度需要相同，例如：鸿蒙开发之Button按钮有哪些类型，如何通过代码设置-鸿蒙开发者社区

<Button
    ohos:id="$+id:button4"
    ohos:width="50vp"
    ohos:height="50vp"
    ohos:text_size="27fp"
    ohos:background_element="$graphic:circle_button_element"
    ohos:text="+"
    ohos:left_margin="15vp"
    ohos:bottom_margin="15vp"
    ohos:right_padding="15vp"
    ohos:left_padding="15vp"
/>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

场景示例

利用圆形按钮，胶囊按钮，文本组件可以绘制出如下拨号盘的UI界面。

鸿蒙开发之Button按钮有哪些类型，如何通过代码设置-鸿蒙开发者社区

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:background_element="$graphic:color_light_gray_element"
    ohos:orientation="vertical">
    <Text
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text_size="20fp"
        ohos:text="0123456789"
        ohos:background_element="$graphic:green_text_element"
        ohos:text_alignment="center"
        ohos:layout_alignment="horizontal_center"
    />
    <DirectionalLayout
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:alignment="horizontal_center"
        ohos:orientation="horizontal"
        ohos:top_margin="5vp"
        ohos:bottom_margin="5vp">
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="1"
            ohos:text_alignment="center"
        />
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="2"
            ohos:left_margin="5vp"
            ohos:right_margin="5vp"
            ohos:text_alignment="center"
        />
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="3"
            ohos:text_alignment="center"
        />
    </DirectionalLayout>
    <DirectionalLayout
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:alignment="horizontal_center"
        ohos:orientation="horizontal"
        ohos:bottom_margin="5vp">
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="4"
            ohos:text_alignment="center"
        />
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:left_margin="5vp"
            ohos:right_margin="5vp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="5"
            ohos:text_alignment="center"
        />
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="6"
            ohos:text_alignment="center"
        />
    </DirectionalLayout>
    <DirectionalLayout
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:alignment="horizontal_center"
        ohos:orientation="horizontal"
        ohos:bottom_margin="5vp">
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="7"
            ohos:text_alignment="center"
        />
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:left_margin="5vp"
            ohos:right_margin="5vp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="8"
            ohos:text_alignment="center"
        />
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="9"
            ohos:text_alignment="center"
        />
    </DirectionalLayout>
    <DirectionalLayout
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:alignment="horizontal_center"
        ohos:orientation="horizontal"
        ohos:bottom_margin="5vp">
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="*"
            ohos:text_alignment="center"
        />
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:left_margin="5vp"
            ohos:right_margin="5vp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="0"
            ohos:text_alignment="center"
        />
        <Button
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:text_size="15fp"
            ohos:background_element="$graphic:green_circle_button_element"
            ohos:text="#"
            ohos:text_alignment="center"
        />
    </DirectionalLayout>
    <Button
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text_size="15fp"
        ohos:text="CALL"
        ohos:background_element="$graphic:green_capsule_button_element"
        ohos:bottom_margin="5vp"
        ohos:text_alignment="center"
        ohos:layout_alignment="horizontal_center"
        ohos:left_padding="10vp"
        ohos:right_padding="10vp"
        ohos:top_padding="2vp"
        ohos:bottom_padding="2vp"
    />
</DirectionalLayout>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.