技術標籤：HarmonyOS鴻蒙

一 概述

同Text一樣，Button也不能作為專案的佈局檔案來使用，需要結合佈局檔案一起使用

 public final void setUIContent(int layoutRes)
 public void setUIContent(ComponentContainer componentContainer)

二 建立Button

3.1 程式碼建立Button

public void onStart(Intent intent) {
   super.onStart(intent);
   DirectionalLayout directionalLayout = new DirectionalLayout(getContext());
   Button button = new Button(getContext());
   button.setText("Button");
   button.setTextSize(50);
   button.setId(100);
   directionalLayout.addComponent(button);
   super.setUIContent(directionalLayout);
 }
 

3.2 XML佈局建立Button

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent">
    <Button
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="20vp"
        ohos:text="Button"/>
</DirectionalLayout>
 

3.3 給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:background_button"
    ohos:left_margin="15vp"
    ohos:bottom_margin="15vp"
    ohos:right_padding="8vp"
    ohos:left_padding="8vp"
    ohos:element_left="$graphic:ic_btn_reload"
/>
 

background_button.xml

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

ic_btn_reload

<?xml version="1.0" encoding="UTF-8"?>
<vector xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:width="64vp" ohos:height="64vp" ohos:viewportWidth="1024" ohos:viewportHeight="1024"> 
  <path ohos:fillColor="#FF000000" ohos:pathData="M810.67,512 L952.32,512 741.12,723.2 529.92,512 724.05,512C725.33,446.29 700.59,381.01 650.24,330.67 550.4,230.83 388.27,230.83 288.43,330.67 188.59,430.51 188.59,593.07 288.43,692.91 366.93,771.41 484.69,788.05 579.41,742.83L642.13,805.55C512,882.77 341.33,865.71 227.84,753.07 94.72,619.95 95.15,404.05 228.27,270.93 362.67,137.39 577.28,136.96 710.83,270.51 777.39,337.07 810.67,424.53 810.67,512Z"></path>
</vector>

四 不同型別的按鈕

按照按鈕的形狀，按鈕可以分為：普通按鈕，橢圓按鈕，膠囊按鈕，圓形按鈕等。

4.1 普通按鈕

佈局檔案

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

背景color_blue_element.xml

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

效果圖

4.2 橢圓按鈕

佈局檔案

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

背景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>

效果圖

4.3 膠囊按鈕

佈局檔案

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

背景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>

效果圖

4.4 圓形按鈕

佈局檔案

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

背景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>

效果圖

五 按鈕點選事件

Button button= (Button) findComponentById(ResourceTable.Id_button);
button.setClickedListener(new Component.ClickedListener() {
    @Override
    public void onClick(Component component) {
        new ToastDialog(MainAbilitySlice.this).setText("被點選了") .show();
        }
 });