一、Button 組件

• Button 是一種常見的組件，點擊可以觸發對應的操作，通常由文本或圖標組成，也可以由圖標和文本共同組成。
• 文本按鈕，如下所示：

• 圖標按鈕，如下所示：

• 圖標和文本共同組成的按鈕，如下所示：

二、支持的 XML 屬性

• Button 無自有的 XML 屬性，共有 XML 屬性繼承自 Text；
• Text 的自有 XML 屬性，請參考我之前的博客：HarmonyOS之深入分析常用組件Text的功能和使用。

三、創建 Button

• 創建如下樣式的按鈕：

• 在 layout 目錄下的 xml 文件中創建 Button，并設置按鈕的背景形狀、顏色。常用的背景如文本背景、按鈕背景，通常采用 XML 格式放置在 graphic 目錄下：

<Buttonohos: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="$media:ic_btn_reload"/>

• 在“Project”窗口，打開“entry > src > main > resources > base”，右鍵點擊“graphic”文件夾，選擇“New > File”，命名為“background_button.xml”，在該文件中定義按鈕的背景形狀、顏色：

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

• 在“Project”窗口，打開“entry > src > main > resources > base > media”，添加所需圖片至“media”目錄下。

四、響應點擊事件

• 按鈕的重要作用是當用戶單擊按鈕時，會執行相應的操作或者界面出現相應的變化。
• 實際上用戶點擊按鈕時，Button 對象將收到一個點擊事件。開發者可以自定義響應點擊事件的方法。例如，通過創建一個 Component.ClickedListener 對象，然后通過調用 setClickedListener 將其分配給按鈕。

Button button = (Button) findComponentById(ResourceTable.Id_button);// 為按鈕設置點擊事件回調button.setClickedListener(new Component.ClickedListener() {@Overridepublic void onClick(Component component) {// 此處添加點擊按鈕后的事件處理邏輯}});

五、不同類型的按鈕

① 普通按鈕

• 普通按鈕和其他按鈕的區別在于不需要設置任何形狀，只設置文本和背景顏色即可，例如：

<Buttonohos: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"><solidohos:color="#007CFD"/></shape>

② 橢圓按鈕

• 橢圓按鈕是通過設置 background_element 的來實現的， background_element 的 shape 設置為橢圓（oval），例如：

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

• oval_button_element.xml:

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

③ 膠囊按鈕

• 膠囊按鈕是一種常見的按鈕，設置按鈕背景時將背景設置為矩形形狀，并且設置 ShapeElement 的 radius 的半徑，例如：

<Buttonohos: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"><cornersohos:radius="100"/><solidohos:color="#007CFD"/></shape>

④ 圓形按鈕

• 圓形按鈕和橢圓按鈕的區別在于組件本身的寬度和高度需要相同，例如：

<Buttonohos: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"><solidohos:color="#007CFD"/></shape>

六、場景示例

• 利用圓形按鈕，膠囊按鈕，文本組件可以繪制出如下撥號盤的 UI 界面：

• 源碼示例：

<?xml version="1.0" encoding="utf-8"?><DirectionalLayoutxmlns: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"><Textohos: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"/><DirectionalLayoutohos:width="match_parent"ohos:height="match_content"ohos:alignment="horizontal_center"ohos:orientation="horizontal"ohos:top_margin="5vp"ohos:bottom_margin="5vp"><Buttonohos:width="40vp"ohos:height="40vp"ohos:text_size="15fp"ohos:background_element="$graphic:green_circle_button_element"ohos:text="1"ohos:text_alignment="center"/><Buttonohos: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"/><Buttonohos: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><DirectionalLayoutohos:width="match_parent"ohos:height="match_content"ohos:alignment="horizontal_center"ohos:orientation="horizontal"ohos:bottom_margin="5vp"><Buttonohos:width="40vp"ohos:height="40vp"ohos:text_size="15fp"ohos:background_element="$graphic:green_circle_button_element"ohos:text="4"ohos:text_alignment="center"/><Buttonohos: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"/><Buttonohos: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><DirectionalLayoutohos:width="match_parent"ohos:height="match_content"ohos:alignment="horizontal_center"ohos:orientation="horizontal"ohos:bottom_margin="5vp"><Buttonohos:width="40vp"ohos:height="40vp"ohos:text_size="15fp"ohos:background_element="$graphic:green_circle_button_element"ohos:text="7"ohos:text_alignment="center"/><Buttonohos: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"/><Buttonohos: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><DirectionalLayoutohos:width="match_parent"ohos:height="match_content"ohos:alignment="horizontal_center"ohos:orientation="horizontal"ohos:bottom_margin="5vp"><Buttonohos:width="40vp"ohos:height="40vp"ohos:text_size="15fp"ohos:background_element="$graphic:green_circle_button_element"ohos:text="*"ohos:text_alignment="center"/><Buttonohos: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"/><Buttonohos:width="40vp"ohos:height="40vp"ohos:text_size="15fp"ohos:background_element="$graphic:green_circle_button_element"ohos:text="#"ohos:text_alignment="center"/></DirectionalLayout><Buttonohos: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>

• color_light_gray_element.xml：

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

• green_text_element.xml：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><cornersohos:radius="20"/><strokeohos:width="2"ohos:color="#006E00"/><solidohos:color="#EDEDED"/></shape>

• green_circle_button_element.xml：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="oval"><strokeohos:width="5"ohos:color="#006E00"/><solidohos:color="#EDEDED"/></shape>

• green_capsule_button_element.xml：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><cornersohos:radius="100"/><solidohos:color="#006E00"/></shape>

總結

以上是生活随笔為你收集整理的HarmonyOS之常用组件Button的功能和使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。