文章目录
一、布局文件中设置 Button 组件属性
二、代码中修改 Button 组件属性
三、Button 点击事件
四、完整代码示例
五、执行结果
六、GitHub 地址
一、布局文件中设置 Button 组件属性
Button 组件是在 UI 界面中的按钮组件 , 重要的用户交互接口 ;
布局文件中设置 Button :
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" ohos:orientation="vertical"> <Button ohos: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() { @Override public 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 { @Override public 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() { @Override public 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); } }); } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent); } }
布局文件代码 :
<?xml version="1.0" encoding="utf-8"?> <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:orientation="vertical"> <Button ohos: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
