【HarmonyOS鸿蒙开发UI专题NO.14】常用组件RadioButton和RadioContainer

内容纲要

作者:韩茹

公司:程序咖(北京)科技有限公司

程序咖:IT职业技能评测平台

网址:https://www.chengxuka.com

RadioButton

RadioButton用于多选一的操作,需要搭配RadioContainer使用,实现单选效果。

支持的XML属性

RadioButton的共有XML属性继承自:Text

RadioButton的自有XML属性见下表:

属性名称 中文描述 取值 取值说明 使用案例
marked 当前状态 boolean类型 可以直接设置true/false,也可以引用boolean资源。 ohos:marked="true"
ohos:marked="$boolean:true"
text_color_on 处于选中状态的文本颜色 color类型 可以直接设置色值,也可以引用color资源。 ohos:text_color_on="#FFFFFFFF"
ohos:text_color_on="$color:black"
text_color_off 处于未选中状态的文本颜色 color类型 可以直接设置色值,也可以引用color资源。 ohos:text_color_off="#FFFFFFFF"
ohos:text_color_off="$color:black"
check_element 状态标志样式 Element类型 可直接配置色值,也可引用color资源或引用media/graphic下的图片资源。 ohos:check_element="#000000"
ohos:check_element="$color:black"
ohos:check_element="$media:media_src"
ohos:check_element="$graphic:graphic_src"

创建RadioButton

在layout目录下的xml文件中创建RadioButton。

<?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"
    ohos:background_element="#33666600"
    ohos:padding="20vp"
    >

    <RadioButton
        ohos:id="$+id:rb_1"
        ohos:height="40vp"
        ohos:width="match_content"
        ohos:text="A.程序咖"
        ohos:text_size="20fp"/>

</DirectionalLayout>

效果图:

radiobuttonyunxing1

设置RadioButton

设置单选按钮的字体颜色:

在xml中设置:text_color_on为选中状态的字体颜色,text_color_off为未选中状态的字体颜色。

<Image
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="center"
        ohos:top_margin="20vp"
        ohos:image_src="$media:chengxuka"
        ohos:alpha="0.5"
        />

设置单选按钮字体颜色效果:

radiobuttonyunxing2

也可以在Java代码中设置:

    rBtn.setTextColorOn(new Color(Color.getIntColor("#0066FF")));
    rBtn.setTextColorOff(new Color(Color.getIntColor("#505050")));

RadioContainer

RadioContainer是RadioButton的容器,在其包裹下的RadioButton保证只有一个被选项。

您必须登录才能阅读本文的其余部分。请登录注册为用户。

发布者:韩茹,未经授权,禁止转载,违者必究:https://bus.chengxuka.com/archives/2097

发表评论

登录后才能评论