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

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数HarmonyOS鸿蒙开发工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年HarmonyOS鸿蒙开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上HarmonyOS鸿蒙开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新

如果你觉得这些内容对你有帮助，可以添加VX：vip204888 （备注鸿蒙获取）

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

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

<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="$media:ic\_btn\_reload"/>

graphic目录下的oval_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>

胶囊按钮

胶囊按钮是一种常见的按钮，设置按钮背景时将背景设置为矩形形状，并且设置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="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>

graphic目录下的各XML文件示例如下：

color_light_gray_element.xml：

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

ng=“2vp”
ohos:bottom_padding=“2vp”
/>

graphic目录下的各XML文件示例如下：


color\_light\_gray\_element.xml：

<?xml version="1.0" encoding="utf-8"?>