HarmonyOS — Button按钮
文章目录
-
- 1、Button 是什么？
- 2、普通按钮
- 3、椭圆按钮
- 4、Button 响应事件
- 5、实战：拨号盘的UI界面
- 6、Button 更多
1、Button 是什么？
简单：按钮组件
官方：Button是一种常见的组件，点击可以触发对应的操作，通常由文本或图标组成，也可以由图标和文本共同组成。
2、普通按钮
<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
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="rectangle">
<solid
ohos:color="#007CFD"/>
shape>
3、椭圆按钮
<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="$media:ic_btn_reload"
/>
oval_button_element.xml:
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="oval">
<solid
ohos:color="#007CFD"/>
shape>
4、Button 响应事件
按钮的重要作用是当用户单击按钮时，会执行相应的操作或者界面出现相应的变化。实际上用户点击按钮时，Button对象将收到一个点击事件。开发者可以自定义响应点击事件的方法。例如，通过创建一个Component.ClickedListener对象，然后通过调用setClickedListener将其分配给按钮。
Button button = (Button) findComponentById(ResourceTable.Id_button);
// 为按钮设置点击事件回调
button.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
// 此处添加点击按钮后的事件处理逻辑
}
});
5、实战：拨号盘的UI界面
<DirectionalLayout
xmlns: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">
<Text
ohos: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"
/>
<DirectionalLayout
ohos:width="match_parent"
ohos:height="match_content"
ohos:alignment="horizontal_center"
ohos:orientation="horizontal"
ohos:top_margin="5vp"
ohos:bottom_margin="5vp">
<Button
ohos:width="40vp"
ohos:height="40vp"
ohos:text_size="15fp"
ohos:background_element="$graphic:green_circle_button_element"
ohos:text="1"
ohos:text_alignment="center"
/>
<Button
ohos: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"
/>
<Button
ohos: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>
<DirectionalLayout
ohos:width="match_parent"
ohos:height="match_content"
ohos:alignment="horizontal_center"
ohos:orientation="horizontal"
ohos:bottom_margin="5vp">
<Button
ohos:width="40vp"
ohos:height="40vp"
ohos:text_size="15fp"
ohos:background_element="$graphic:green_circle_button_element"
ohos:text="4"
ohos:text_alignment="center"
/>
<Button
ohos: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"
/>
<Button
ohos: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>
<DirectionalLayout
ohos:width="match_parent"
ohos:height="match_content"
ohos:alignment="horizontal_center"
ohos:orientation="horizontal"
ohos:bottom_margin="5vp">
<Button
ohos:width="40vp"
ohos:height="40vp"
ohos:text_size="15fp"
ohos:background_element="$graphic:green_circle_button_element"
ohos:text="7"
ohos:text_alignment="center"
/>
<Button
ohos: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"
/>
<Button
ohos: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>
<DirectionalLayout
ohos:width="match_parent"
ohos:height="match_content"
ohos:alignment="horizontal_center"
ohos:orientation="horizontal"
ohos:bottom_margin="5vp">
<Button
ohos:width="40vp"
ohos:height="40vp"
ohos:text_size="15fp"
ohos:background_element="$graphic:green_circle_button_element"
ohos:text="*"
ohos:text_alignment="center"
/>
<Button
ohos: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"
/>
<Button
ohos:width="40vp"
ohos:height="40vp"
ohos:text_size="15fp"
ohos:background_element="$graphic:green_circle_button_element"
ohos:text="#"
ohos:text_alignment="center"
/>
DirectionalLayout>
<Button
ohos: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：
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="rectangle">
<solid
ohos:color="#EDEDED"/>
shape>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="rectangle">
<corners
ohos:radius="20"/>
<stroke
ohos:width="2"
ohos:color="#006E00"/>
<solid
ohos:color="#EDEDED"/>
shape>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="oval">
<stroke
ohos:width="5"
ohos:color="#006E00"/>
<solid
ohos:color="#EDEDED"/>
shape>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="rectangle">
<corners
ohos:radius="100"/>
<solid
ohos:color="#006E00"/>
shape>
6、Button 更多
Button 更多