鸿蒙简单组件的使用（Text、Button、RadioButton、Checkbox、Progress、Slider、TextField）

最新推荐文章于 2024-07-14 22:18:00 发布

前进道路上的程序猿

最新推荐文章于 2024-07-14 22:18:00 发布

阅读量1.2k

点赞数 1

分类专栏：鸿蒙 HarmonyOS 前端

本文链接：https://blog.csdn.net/u010574271/article/details/110474851

版权

前端同时被 3 个专栏收录

31 篇文章 0 订阅

订阅专栏

HarmonyOS

14 篇文章 1 订阅

订阅专栏

鸿蒙

12 篇文章 0 订阅

订阅专栏

今天我们介绍几种鸿蒙Java开发中用到的一些简单常用的组件的使用方法，使用到的模拟器时鸿蒙系统的TV

新建项目

在这里插入图片描述
弹出窗口中选择TV-Empty Feature Ability(Java),点击next

输入项目名称-finish

Text组件的使用

新建布局xml文件

首先我们在resources-base-layout下新建一个text_layout.xml文件

<?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:padding="102">
    <Text
        ohos:id="$+id:text2"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="horizontal_center"
        ohos:text="hello world"
        ohos:background_element="blue"
        ohos:text_size="100"
        />
</DirectionalLayout>

该文件中Text为显示的text组件进行各种布局配置，其中id为text2、height宽度和width高度都匹配字体、layout_alignment排列为水平居中、text文字为hello、background_element背景色为#0000FF、字体大小为100

新建关于text组件的AbilitySlice

package com.example.secondjavatv.slice;

import com.example.secondjavatv.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Text;
import ohos.agp.utils.Color;

public class TextDemo extends AbilitySlice {
    private Text txtLog;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_text_layout);
        Text txt = (Text) findComponentById(ResourceTable.Id_text2);
        if(txt!=null) {
            txt.setTextColor(Color.RED);
            txt.setText("你好");
        }
    }
    @Override
    public void onActive() {
        super.onActive();
    }
    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

1.这里通过"super.setUIContent(ResourceTable.Layout_text_layout)";拿到相关布局，其中"Layout_text_layout"为相关布局文件名前"Layout_";
2.Text txt = (Text) findComponentById(ResourceTable.Id_text2)“拿到text组件的配置，txt可以利用方法setTextColor设置字体颜色；可以通过setText设置字体内容

更改MainAbility中主页路径

package com.example.secondjavatv;

import com.example.secondjavatv.slice.*;
import com.example.secondjavatv.slice.MainAbilitySlice;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;
public class MainAbility extends Ability {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setMainRoute(TextDemo.class.getName());
    }
}

执行结果

在这里插入图片描述

Button组件的使用

新建布局的xml文件

首先我们在resources-base-layout下新建一个button_layout.xml文件

<?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:padding="32">

    <Button ohos:id="$+id:btn"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:layout_alignment="horizontal_center"
            ohos:text="click"
            ohos:text_color="#FF0000"
            ohos:background_element="#0000FF"
            ohos:text_size="150"></Button>
</DirectionalLayout>

该文件中Button为显示的Button组件进行各种布局配置，其中id为btn、height宽度和width高度都匹配字体、layout_alignment排列为水平居中、text文字为click、background_element背景色为#0000FF、字体大小为150

新建关于Button组件的AbilitySlice

package com.example.secondjavatv.slice;

import com.example.secondjavatv.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.Text;
import ohos.agp.components.element.ShapeElement;

public class ButtonSlice extends AbilitySlice {
    private Text txtLog;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_button_layout);
        Button button = (Button) findComponentById(ResourceTable.Id_btn);
        if(button!=null) {
            button.setClickedListener(new Component.ClickedListener() {
                @Override
                public void onClick(Component component) {
                    //设置Button的背景色
                    ShapeElement element = new ShapeElement();
                    element.setRgbColor(new RgbColor(100,100,100));
                    button.setBackground(element);
                    //设置Button的文本
                    button.setText("already click");
                }
            });
        }
    }
...
}

1.button的基本配置同前面的text，首先获得布局，然后根据button的ID获取button组件，再根据组件的各种set来设置其相应的样式等；
2. 通过
button.setClickedListener(new Component.ClickedListener() {@Override
public void onClick(Component component) {…}
}
来给button配置一个点击的监听事件,本案例中是监听点击后，重新设置按钮背景色和文本

更改MainAbility中主页路径

package com.example.secondjavatv;

import com.example.secondjavatv.slice.*;
import com.example.secondjavatv.slice.MainAbilitySlice;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;
public class MainAbility extends Ability {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setMainRoute(ButtonSlice.class.getName());
    }
}

执行结果

开始页面：
在这里插入图片描述
点击后：

RadioButton组件的使用

新建布局的xml文件

首先我们在resources-base-layout下新建一个radiobutton_layout.xml文件

<?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:padding="80">

    <RadioContainer ohos:id="$+id:rc"
                    ohos:height="match_content"
                    ohos:width="match_content"
                    ohos:orientation="vertical"
                    ohos:background_element="red"
        >
        <RadioButton ohos:id="$+id:rb1"
                     ohos:height="match_content"
                     ohos:width="match_content"
                     ohos:layout_alignment="horizontal_center"
                     ohos:text="选项1"
                     ohos:text_size="50"></RadioButton>
        <RadioButton ohos:id="$+id:rb2"
                     ohos:height="match_content"
                     ohos:width="match_content"
                     ohos:layout_alignment="horizontal_center"
                     ohos:text="选项2"
                     ohos:text_size="50"></RadioButton>
        <RadioButton ohos:id="$+id:rb3"
                     ohos:height="match_content"
                     ohos:width="match_content"
                     ohos:layout_alignment="horizontal_center"
                     ohos:text="选项3"
                     ohos:text_size="50"></RadioButton>
    </RadioContainer>

</DirectionalLayout>

该文件中RadioContainer 为RadioButton的父组件，里面包含三个RadioButton ，分别为rb1、rb2、rb13

新建关于RadioButton组件的AbilitySlice

package com.example.secondjavatv.slice;

import com.example.secondjavatv.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Component;
import ohos.agp.components.RadioButton;
import ohos.agp.components.RadioContainer;
import ohos.agp.components.Text;
import ohos.hiviewdfx.HiLog;
import ohos.hiviewdfx.HiLogLabel;

public class RadioButtonDemo extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_radiobutton_layout);
        RadioButton radioButton1 = (RadioButton)findComponentById(ResourceTable.Id_rb1);
        RadioButton radioButton2 = (RadioButton)findComponentById(ResourceTable.Id_rb2);
        radioButton1.setChecked(true);
        RadioContainer radioContainer = (RadioContainer)findComponentById(ResourceTable.Id_rc);

        radioContainer.setMarkChangedListener(new RadioContainer.CheckedStateChangedListener() {
            @Override
            public void onCheckedChanged(RadioContainer radioContainer, int i) {
                if(radioButton2.isChecked()) {
                    radioButton2.setText("radiobutton2被选中");
                } else {
                    radioButton2.setText("选项2");
                }
            }
        });
    }
...
}

1.代码中首先将RadioButton和RadioContainer组件拿出来，然后radioButton1设置为已选中；
2. 通过
radioContainer.setMarkChangedListener(new RadioContainer.CheckedStateChangedListener() {
@Override
public void onCheckedChanged(RadioContainer radioContainer, int i) {…}
}
来给radioContainer设置一个选择更改的监听，当选择更改后，判断radioButton2是否选中，从而更改radioButton2的文字

更改MainAbility中主页路径

package com.example.secondjavatv;

import com.example.secondjavatv.slice.RadioButtonDemo;
import com.example.secondjavatv.slice.MainAbilitySlice;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;
public class MainAbility extends Ability {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setMainRoute(RadioButtonDemo.class.getName());
    }
}

执行结果

开始页面默认选项1被选中：
在这里插入图片描述

当选择为选项2时文字改变：
在这里插入图片描述
当选择选项3时，选项2文字又还原了：

Checkbox组件的使用

新建布局的xml文件

首先我们在resources-base-layout下新建一个checkbox_layout.xml文件

<?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:padding="32">

    <Checkbox
        ohos:id="$+id:checkbox1"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="horizontal_center"
        ohos:text="选项1"
        ohos:background_element="#FF0000"
        ohos:text_color="#FFFF00"
        ohos:text_size="80"
        />
    <Checkbox
        ohos:id="$+id:checkbox2"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="horizontal_center"
        ohos:text="选项2"
        ohos:background_element="#FFFF00"
        ohos:text_color="#FF00FF"
        ohos:text_size="80"
        />
    <Checkbox
        ohos:id="$+id:checkbox3"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="horizontal_center"
        ohos:text="选项3"
        ohos:background_element="#00FF00"
        ohos:text_color="#0000FF"
        ohos:text_size="80"
        />
</DirectionalLayout>

该文件中包含三个Checkbox，分别为checkbox1、checkbox2、checkbox3

新建关于Checkbox组件的AbilitySlice

package com.example.secondjavatv.slice;

import com.example.secondjavatv.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.colors.RgbColor;
import ohos.agp.components.Checkbox;
import ohos.agp.components.Component;
import ohos.agp.components.Text;
import ohos.agp.components.element.ShapeElement;

public class CheckboxDemo extends AbilitySlice {
    private Text txtLog;
    //复选框
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_checkbox_layout);
        Checkbox checkbox = (Checkbox)findComponentById(ResourceTable.Id_checkbox3);
        checkbox.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                if(checkbox.isChecked()) {
                    //设置背景色
                    ShapeElement element = new ShapeElement();
                    element.setRgbColor(new RgbColor(0,255,0));
                    checkbox.setBackground(element);
                    //设置文本
                    checkbox.setText("选项3");
                } else {
                    //设置背景色
                    ShapeElement element = new ShapeElement();
                    element.setRgbColor(new RgbColor(200,200,200));
                    checkbox.setBackground(element);
                    //设置文本
                    checkbox.setText("选项3被选中");
                }
            }
        });
    }
...
}

1.代码中首先将checkbox组件拿出来
2. 通过来给checkbox设置一个点击事件的监听，当点击checkbox，判断checkbox是否选中，从而更改checkbox的文字
注意：这里checkbox的状态是点击事件之前的选中状态，checkbox的状态更改是在点击事件之后发生的

更改MainAbility中主页路径

package com.example.secondjavatv;

import com.example.secondjavatv.slice.*;
import com.example.secondjavatv.slice.MainAbilitySlice;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;
public class MainAbility extends Ability {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setMainRoute(CheckboxDemo.class.getName());
    }
}

执行结果

开始页面：
在这里插入图片描述

当点击选项3时其颜色和文字发生了改变：
在这里插入图片描述

当再次点击选项3时，选项3文字又还原了：
在这里插入图片描述

Progress组件的使用

ProgressBar 进度条组件分为两种：
1.圆形进度条 RoundProgressBar
2. 直线型进度条 ProgressBar ;

新建布局的xml文件

首先我们在resources-base-layout下新建一个progress_layout.xml文件

<?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:padding="32">
    <ProgressBar
        ohos:id="$+id:progress1"
        ohos:width="400"
        ohos:height="400"
        />
    <RoundProgressBar
        ohos:id="$+id:progress2"
        ohos:width="400"
        ohos:height="400"
        ohos:min="0"
        ohos:max="100"
        ohos:progress="30"
        ohos:vice_progress="50"
        ></RoundProgressBar>
</DirectionalLayout>

该xml中设置了一个直线型进度条和一个圆形进度条的布局
其中，布局元素有：
最小值 : ohos:min
最大值 : ohos:max
当前进度 : ohos:progress
第二进度：ohos:vice_progress
宽度 : ohos:width
高度 : ohos:height

新建关于Progress组件的AbilitySlice

package com.example.secondjavatv.slice;

import com.example.secondjavatv.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.ProgressBar;
import ohos.agp.components.Text;

public class ProgressDemo extends AbilitySlice {
    private Text txtLog;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_progress_layout);
        ProgressBar progressBar = (ProgressBar)findComponentById(ResourceTable.Id_progress1);

        if(progressBar!=null) {
            progressBar.setMaxValue(100);
            progressBar.setMinValue(0);
            progressBar.setProgressValue(20);
            progressBar.setViceProgress(40);
        }
    }

...
}

1.代码中首先将直线型进度条progress1拿出来，然后判断是否为空，不为空则设置最大值为100，最小值为0，第一进度条为20，第二进度条为40

更改MainAbility中主页路径

package com.example.secondjavatv;

import com.example.secondjavatv.slice.*;
import com.example.secondjavatv.slice.MainAbilitySlice;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;
public class MainAbility extends Ability {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setMainRoute(ProgressDemo.class.getName());
    }
}

执行结果

在这里插入图片描述

Slider组件的使用

新建布局的xml文件

首先我们在resources-base-layout下新建一个progress_layout.xml文件

<?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:padding="32">
    <Slider
        ohos:id="$+id:slider1"
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:layout_alignment="horizontal_center"
        ohos:orientation="horizontal"
        ohos:min="0"
        ohos:max="100"
        ohos:progress="40"
        ohos:background_element="#FF0000"
        ohos:progress_color="#0000FF"/>
    <Text
        ohos:id="$+id:txtSlider"
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:layout_alignment="horizontal_center"
        ohos:text="0"
        ohos:text_color="#0000FF"
        ohos:text_size="60"/>
    <Button
        ohos:id="$+id:btnSlider"
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:layout_alignment="horizontal_center"
        ohos:text="progress"
        ohos:text_color="#FF0000"
        ohos:background_element="#00FFFF"
        ohos:text_size="150"/>
</DirectionalLayout>

该xml中设置了一个滑块组件，一个文字组件和一个按钮组件的布局
其中滑块组件的布局元素有：
宽度 : ohos:width
高度 : ohos:height
滑块布局方向：ohos:orientation
最小值 : ohos:min
最大值 : ohos:max
滑块进度值：ohos:progress
滑块背景色：ohos:background_element
滑块进度颜色： ohos:progress_color

新建关于Slider组件的AbilitySlice

package com.example.secondjavatv.slice;

import com.example.secondjavatv.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.Slider;
import ohos.agp.components.Text;

public class SlideDemo extends AbilitySlice {
    private Text txtLog;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_slider_layout);
        Slider slider = (Slider) findComponentById(ResourceTable.Id_slider1);
        Text txt = (Text)findComponentById(ResourceTable.Id_txtSlider);
        Button button =   (Button)findComponentById(ResourceTable.Id_btnSlider);
        if(slider!=null&&txt!=null&&button!=null) {
            button.setClickedListener(new Component.ClickedListener() {
                @Override
                public void onClick(Component component) {        txt.setText(String.valueOf(slider.getProgress()));
                }
            });
        }
    }
...
}

1.代码中首先将Slider、Text、Button等组件拿出来，然后在Button上设置一个点击监听事件，当按钮按下以后，将text的值设置为Slider的progress

更改MainAbility中主页路径

package com.example.secondjavatv;

import com.example.secondjavatv.slice.*;
import com.example.secondjavatv.slice.MainAbilitySlice;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;
public class MainAbility extends Ability {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setMainRoute(SlideDemo.class.getName());
    }
}

执行结果

1.初始画面中text的值为0
在这里插入图片描述
2.当点击按钮后，text显示为滑块的progress的初值

3.当滑动滑块后，点击按钮，text显示该情况下滑块的progress值

TextField组件的使用

新建布局的xml文件

首先我们在resources-base-layout下新建一个progress_layout.xml文件

<?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:padding="102">
        <Text
            ohos:id="$+id:text2"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:layout_alignment="horizontal_center"
            ohos:text="hello world"
            ohos:background_element="blue"
            ohos:text_size="100"
            />
</DirectionalLayout>

该xml中设置了一个文本编辑组件的布局
其中文本域布局元素有：
宽度 : ohos:width
高度 : ohos:height
对其方式：ohos:layout_alignment
文字：ohos:text
背景色：ohos:background_element
文字大小：ohos:text_size

新建关于TextField组件的AbilitySlice

package com.example.secondjavatv.slice;

import com.example.secondjavatv.slice.*;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Text;
import ohos.agp.components.TextField;

public class TextFieldDemo extends AbilitySlice {
    private Text txtLog;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_textfield_layout);
    }
...
}

更改MainAbility中主页路径

package com.example.secondjavatv;

import com.example.secondjavatv.slice.*;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;
public class MainAbility extends Ability {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setMainRoute(TextFieldDemoclass.getName());
    }
}