鸿蒙HarmonyOS APP开发入门3——组件（九 按钮组件 ）—

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

<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"/>

graphic目录下的capsule_button_element.xml文件示例如下:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos" 
 ohos:shape="rectangle">    
    <corners ohos:radius="100"/>
    <solid ohos:color="#007CFD"/>
</shape>

圆形按钮

圆形按钮和椭圆按钮的区别在于组件本身的宽度和高度需要相同，例如：

<Button 
 ohos:id="$+id:button" 
 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"/>

graphic目录下的circle_button_element.xml文件示例如下:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos" 
 ohos:shape="oval">    
    <solid ohos:color="#007CFD"/>
</shape>

场景示例

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

**图4 界面效果

源码示例：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
 xmlns:ohos=&#