文章目錄

• 一、布局文件中設(shè)置 Button 組件屬性
• 二、代碼中修改 Button 組件屬性
• 三、Button 點(diǎn)擊事件
• 四、完整代碼示例
• 五、執(zhí)行結(jié)果
• 六、GitHub 地址

一、布局文件中設(shè)置 Button 組件屬性

---

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

布局文件中設(shè)置 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="你點(diǎn)啥"ohos:text_size="150"ohos:text_color="#00FF00"/></DirectionalLayout>

id 屬性 : ohos:id="$+id:button" , 用于作為當(dāng)前組件的唯一標(biāo)識(shí) , 在單個(gè)布局文件中不允許 id 標(biāo)識(shí)重復(fù) ;

寬度與高度屬性 : 可以設(shè)置 match_content 和 match_parent 兩個(gè)值 ;

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

組件位置屬性 : ohos:layout_alignment=“horizontal_center” , 上述配置標(biāo)識(shí)組件水平居中 ;

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

文本設(shè)置 : ohos:text=“你點(diǎn)啥” , 設(shè)置組件顯示的文本為 “你點(diǎn)啥” ;

文本文字大小設(shè)置 : ohos:text_size=“150”

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

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

---

代碼中設(shè)置 Button 屬性 :

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

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

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

設(shè)置文本 : 調(diào)用 Button 對(duì)象的 setText ( ) 方法設(shè)置文本 ;

設(shè)置文字大小 : 調(diào)用 Button 對(duì)象的 setTextSize ( ) 方法設(shè)置文字大小 ;

設(shè)置文字顏色 : 調(diào)用 Button 對(duì)象的 setTextColor ( ) 方法設(shè)置文字顏色 ;

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

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

三、Button 點(diǎn)擊事件

---

點(diǎn)擊 Button 按鈕事件 :

設(shè)置 Component.ClickedListener 點(diǎn)擊監(jiān)聽(tīng)器 , 點(diǎn)擊 Button 按鈕組件后通過(guò)該方法回調(diào) ;

// 獲取 XML 布局中的 Button 按鈕Button button = (Button) findComponentById(ResourceTable.Id_button);// 設(shè)置 Button 按鈕點(diǎn)擊事件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);// 設(shè)置 Button 按鈕點(diǎn)擊事件button.setClickedListener(new Component.ClickedListener() {@Overridepublic void onClick(Component component) {// 修改 Button 按鈕屬性// 修改 Button 背景顏色ShapeElement shapeElement = new ShapeElement();// 設(shè)置紅色背景shapeElement.setRgbColor(new RgbColor(0xFF, 0x00, 0x00));// 設(shè)置 組件 背景button.setBackground(shapeElement);// 設(shè)置文本button.setText("點(diǎn)你咋地");// 設(shè)置文本顏色button.setTextColor(Color.WHITE);// 設(shè)置文本大小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="你點(diǎn)啥"ohos:text_size="150"ohos:text_color="#00FF00"/></DirectionalLayout>

五、執(zhí)行結(jié)果

---

點(diǎn)擊前 :

點(diǎn)擊后 :

六、GitHub 地址

---

GitHub 主應(yīng)用 : https://github.com/han1202012/HarmonyHelloWorld

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。