Button组件介绍和应用体验分享 原创

鸿蒙时代
发布于 2021-3-14 12:25
浏览
0收藏

Button组件是常用的交互类组件之一,本节将来聊聊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:jltfbtn"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#FF17D3EB"
        ohos:layout_alignment="horizontal_center"
        ohos:text="我是一个按钮button"
        ohos:padding="20vp"
        ohos:top_margin="10px"
        ohos:text_color="#FFFFFF"
        ohos:text_size="50"
        />
    <Text
        ohos:height="100px"
        ohos:width="300px"
        ohos:text_size="20fp"
        ohos:top_margin="40px"
        ohos:left_margin="400px"
        ohos:text="普通按钮"/>
    <Button
        ohos:width="200vp"
        ohos:height="70vp"
        ohos:text_size="27fp"
        ohos:text="button"
        ohos:background_element="$graphic:jltfcolor_blue_element"
        ohos:top_margin="15px"
        ohos:left_margin="90vp"
        ohos:bottom_margin="15vp"
        ohos:right_padding="8vp"
        ohos:left_padding="8vp"
        />
    <Text
        ohos:height="100px"
        ohos:width="300px"
        ohos:text_size="20fp"
        ohos:left_margin="400px"
        ohos:text="椭圆按钮"/>
    <Button
        ohos:width="200vp"
        ohos:height="70vp"
        ohos:text_size="27fp"
        ohos:text="button"
        ohos:background_element="$graphic:jltfoval_button_element"
        ohos:bottom_margin="15vp"
        ohos:top_margin="15px"
        ohos:left_margin="90vp"
        ohos:right_padding="8vp"
        ohos:left_padding="8vp"
        />
    <Text
        ohos:height="100px"
        ohos:width="300px"
        ohos:text_size="20fp"
        ohos:left_margin="400px"
        ohos:text="胶囊按钮"/>
    <Button
        ohos:id="$+id:button"
        ohos:width="200vp"
        ohos:height="70vp"
        ohos:text_size="27fp"
        ohos:text="button"
        ohos:background_element="$graphic:jltfcapsule_button_element"
        ohos:left_margin="90vp"
        ohos:top_margin="15px"
        ohos:bottom_margin="15vp"
        ohos:right_padding="15vp"
        ohos:left_padding="15vp"
        />
    <Text
        ohos:height="100px"
        ohos:width="300px"
        ohos:text_size="20fp"
        ohos:left_margin="400px"
        ohos:text="圆形按钮"/>
    <Button
        ohos:id="$+id:button2"
        ohos:width="140vp"
        ohos:height="140vp"
        ohos:text_size="27fp"
        ohos:background_element="$graphic:jltfcircle_button_element"
        ohos:text="+"
        ohos:left_margin="110vp"
        ohos:bottom_margin="15vp"
        ohos:right_padding="15vp"
        ohos:left_padding="15vp"
        />
</DirectionalLayout>

Slice中的代码

package com.example.jltftiyan.slice;

import com.example.jltftiyan.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        Button button = (Button) findComponentById(ResourceTable.Id_jltfbtn);
        button.setClickedListener(l -> {
            //更改Button组件的内容
            button.setText("我被点击了~");
        });
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

graphic目录下xml文件的代码示例如下:

jltfcolor_blue_element.xml

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

jltfoval_button_element.xml

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

jltfcapsule_button_element.xml

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

jltfcircle_button_element.xml

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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
标签
1
收藏
回复
举报
1条回复
按时间正序
/
按时间倒序
张荣超_九丘教育
张荣超_九丘教育

👍👍👍

回复
2021-3-14 21:09:29
回复
    相关推荐