文章目錄

• 一、布局文件中設置 Button 組件屬性
• 二、代碼中修改 Button 組件屬性
• 三、Button 點擊事件
• 四、完整代碼示例
• 五、執行結果
• 六、GitHub 地址

一、布局文件中設置 Button 組件屬性

---

Button 組件是在 UI 界面中的按鈕組件 , 重要的用戶交互接口 ;

布局文件中設置 Button :

Button 組件在布局文件中的示例 :

<?xml version="1.0" encoding="utf-8"?> <DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:orientation="vertical"><Buttonohos:id="$+id:button"ohos:height="match_content"ohos:width="match_content"ohos:background_element="#000000"ohos:layout_alignment="horizontal_center"ohos:text="你點啥"ohos:text_size="150"ohos:text_color="#00FF00"/></DirectionalLayout>

id 屬性 : ohos:id="$+id:button" , 用于作為當前組件的唯一標識 , 在單個布局文件中不允許 id 標識重復 ;

寬度與高度屬性 : 可以設置 match_content 和 match_parent 兩個值 ;

• 寬度 : ohos:width=“match_content”
• 高度 : ohos:height=“match_content”

組件位置屬性 : ohos:layout_alignment=“horizontal_center” , 上述配置標識組件水平居中 ;

背景設置屬性 : ohos:background_element="#000000" , 可以設置一個顏色值 ;

文本設置 : ohos:text=“你點啥” , 設置組件顯示的文本為 “你點啥” ;

文本文字大小設置 : ohos:text_size=“150”

文本顏色設置 : ohos:text_color="#00FF00" , 綠色 ;

二、代碼中修改 Button 組件屬性

---

代碼中設置 Button 屬性 :

獲取組件 : 調用 findComponentById ( ) 方法獲取 ;

設置背景 : 需要使用 ShapeElement 對象設置 , 下面的代碼是設置 Button 組件紅色背景 ;

// 修改 Button 背景顏色ShapeElement shapeElement = new ShapeElement();// 設置紅色背景shapeElement.setRgbColor(new RgbColor(0xFF, 0x00, 0x00));// 設置 組件 背景button.setBackground(shapeElement);

設置文本 : 調用 Button 對象的 setText ( ) 方法設置文本 ;

設置文字大小 : 調用 Button 對象的 setTextSize ( ) 方法設置文字大小 ;

設置文字顏色 : 調用 Button 對象的 setTextColor ( ) 方法設置文字顏色 ;

完整代碼示例 : 設置 Button 組件紅色背景 , 白色字體 , 180 大小文字 , 以及文本顯示內容 ;

// 修改 Button 按鈕屬性// 修改 Button 背景顏色ShapeElement shapeElement = new ShapeElement();// 設置紅色背景shapeElement.setRgbColor(new RgbColor(0xFF, 0x00, 0x00));// 設置 組件 背景button.setBackground(shapeElement);// 設置文本button.setText("點你咋地");// 設置文本顏色button.setTextColor(Color.WHITE);// 設置文本大小button.setTextSize(180);

三、Button 點擊事件

---

點擊 Button 按鈕事件 :

設置 Component.ClickedListener 點擊監聽器 , 點擊 Button 按鈕組件后通過該方法回調 ;

// 獲取 XML 布局中的 Button 按鈕Button button = (Button) findComponentById(ResourceTable.Id_button);// 設置 Button 按鈕點擊事件button.setClickedListener(new Component.ClickedListener() {@Overridepublic void onClick(Component component) {}}

四、完整代碼示例

---

主界面代碼 :

package com.example.button.slice;import com.example.button.ResourceTable; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.colors.RgbColor; import ohos.agp.components.Button; import ohos.agp.components.Component; import ohos.agp.components.element.ShapeElement; import ohos.agp.utils.Color;public class MainAbilitySlice extends AbilitySlice {@Overridepublic void onStart(Intent intent) {super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main);// 獲取 XML 布局中的 Button 按鈕Button button = (Button) findComponentById(ResourceTable.Id_button);// 設置 Button 按鈕點擊事件button.setClickedListener(new Component.ClickedListener() {@Overridepublic void onClick(Component component) {// 修改 Button 按鈕屬性// 修改 Button 背景顏色ShapeElement shapeElement = new ShapeElement();// 設置紅色背景shapeElement.setRgbColor(new RgbColor(0xFF, 0x00, 0x00));// 設置 組件 背景button.setBackground(shapeElement);// 設置文本button.setText("點你咋地");// 設置文本顏色button.setTextColor(Color.WHITE);// 設置文本大小button.setTextSize(180);}});}@Overridepublic void onActive() {super.onActive();}@Overridepublic void onForeground(Intent intent) {super.onForeground(intent);} }

布局文件代碼 :

<?xml version="1.0" encoding="utf-8"?> <DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:orientation="vertical"><Buttonohos:id="$+id:button"ohos:height="match_content"ohos:width="match_content"ohos:background_element="#000000"ohos:layout_alignment="horizontal_center"ohos:text="你點啥"ohos:text_size="150"ohos:text_color="#00FF00"/></DirectionalLayout>

五、執行結果

---

點擊前 :

點擊后 :

六、GitHub 地址

---

GitHub 主應用 : https://github.com/han1202012/HarmonyHelloWorld

Button 組件示例 Module : https://github.com/han1202012/HarmonyHelloWorld/tree/master/button

總結

以上是生活随笔為你收集整理的【鸿蒙 HarmonyOS】UI 组件 ( Button 组件 )的全部內容，希望文章能夠幫你解決所遇到的問題。

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