HarmonyOS-实战-03
可以将ohos:shape="rectangle"的属性分别设置成为：rectangle、oval 其中胶囊按钮是一种常见的按钮，设置按钮背景时将背景设置为矩形形状，并且设置ShapeElement的radius的半径。在“Project”窗口，打开“entry > src > main > resources > base”，右键点击“graphic”文件夹，选择“New > File”，命名为
第三章：常用组件开发
3.1、Text文本标签
Text是用来显示字符串的组件，在界面上显示为一块文本区域。Text作为一个基本组件，有很多扩展，常见的有按钮组件Button，文本编辑组件TextField。
Text 是继承Component基础组件，其中包含有显示文本、提示文本、字体、字体大小、颜色、对齐方式、输入类型等。
- 创建Text
在layout目录下的xml文件中创建Text
<Text
ohos:id="$+id:text"
ohos:width="match_content"
ohos:height="match_content"
ohos:text="Text"/>
- 设置Text
在xml中设置Text的背景。
layout目录下xml文件的代码示例如下：
<Text
...
ohos:background_element="$graphic:background_text"/>
常用的背景如常见的文本背景、按钮背景，可以采用XML格式放置在graphic目录下。
在“Project”窗口，打开“entry > src > main > resources > base”，右键点击“graphic”文件夹，选择“New > File”，命名为“background_text.xml”，在background_text.xml中定义文本的背景。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="rectangle">
<corners
ohos:radius="20"/>
<solid
ohos:color="#878787"/>
</shape>
实战案例：设置字体大小和颜色
<Text
ohos:id="$+id:text"
ohos:width="match_content"
ohos:height="match_content"
ohos:text="Text"
ohos:text_size="28fp"
ohos:text_color="#0000FF"
ohos:left_margin="15vp"
ohos:bottom_margin="15vp"
ohos:right_padding="15vp"
ohos:left_padding="15vp"
ohos:background_element="$graphic:background_text"/>
实战案例：设置字体风格和字重、对齐方式
<Text
ohos:id="$+id:text"
ohos:width="match_content"
ohos:height="match_content"
ohos:text="Text"
ohos:text_size="28fp"
ohos:text_color="#0000FF"
ohos:italic="true"
ohos:text_weight="700"//设置字重
ohos:text_font="serif"
ohos:text_alignment="horizontal_center|bottom"//设置对齐风格
ohos:left_margin="15vp"
ohos:bottom_margin="15vp"
ohos:right_padding="15vp"
ohos:left_padding="15vp"
ohos:background_element="$graphic:background_text"/>
实战案例：跑马灯
当文本过长时，可以设置跑马灯效果，实现文本滚动显示。前提是文本换行关闭且最大显示行数为1，默认情况下即可满足前提要求。
<Text
ohos:id="$+id:text"
ohos:width="75vp"
ohos:height="match_content"
ohos:text="TextText"
ohos:text_size="28fp"
ohos:text_color="#0000FF"
ohos:italic="true"
ohos:text_weight="700"
ohos:text_font="serif"
ohos:background_element="$graphic:background_text"/>
// 跑马灯效果
text.setTruncationMode(Text.TruncationMode.AUTO_SCROLLING);
// 始终处于自动滚动状态
text.setAutoScrollingCount(Text.AUTO_SCROLLING_FOREVER);
// 启动跑马灯效果
text.startAutoScrolling();
3.2、Button按钮控件
Button是一种常见的组件，点击可以出发对应的操作，通过文本或者图标来组成，可以由图标和文本共同来组成。Button没有自己的xml属性，都是继承于Text的属性。
- 创建Button控件
在layout目录下的xml文件中创建Button，并设置按钮的背景形状、颜色。常用的背景如文本背景、按钮背景，通常采用XML格式放置在graphic目录下。
<Button
ohos:id="$+id:button"
ohos:width="match_content"
ohos:height="match_content"
ohos:text_size="27fp"
ohos:text="button"
ohos:background_element="$graphic:background_button"
ohos:left_margin="15vp"
ohos:bottom_margin="15vp"
ohos:right_padding="8vp"
ohos:left_padding="8vp"
ohos:element_left="$media:ic_btn_reload"
/>
创建一个定义按钮的背景形状、颜色background_button.xml文件
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="rectangle">
<corners
ohos:radius="10"/>
<solid
ohos:color="#007CFD"/>
</shape>
- 响应点击事件
按钮的重要作用是当用户单击按钮时，会执行相应的操作或者界面出现相应的变化。实际上用户点击按钮时，Button对象将收到一个点击事件。开发者可以自定义响应点击事件的方法。例如，通过创建一个Component.ClickedListener对象，然后通过调用setClickedListener将其分配给按钮。
Button button = (Button) findComponentById(ResourceTable.Id_button);
// 为按钮设置点击事件回调
button.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
// 此处添加点击按钮后的事件处理逻辑
}
});
- 不同类型的按钮
按照按钮的形状，可以将按钮分为：普通按钮、椭圆按钮、胶囊按钮、圆形按钮等。如果想要实现以上按钮的效果，需要配置一下对应的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>
可以将ohos:shape="rectangle"的属性分别设置成为：rectangle、oval 其中胶囊按钮是一种常见的按钮，设置按钮背景时将背景设置为矩形形状，并且设置ShapeElement的radius的半径。圆形按钮和椭圆按钮的区别在于组件本身的宽度和高度需要相同，但是必须要设置成为oval类型。
3.3、TextField输入控件
TextField主要是提供了接收用户的输入信息，基本的XML属性是继承自：Text
- 创建TextField
在layout目录下的xml文件中创建一个TextField
<TextField
...
ohos:id="$+id:text_field"
ohos:height="40vp"
ohos:width="200vp"
ohos:left_padding="20vp"
/>
获取输入框的内容：
TextField textField = (TextField) findComponentById(ResourceTable.Id_text_field);
String content = textField.getText();
- 设置TextField内容
在xml中设置TextField的背景。
layout目录下xml文件的代码示例如下：
<TextField
...
ohos:background_element="$graphic:background_text_field"
/>
graphic目录下xml文件（例：background_text_field.xml）的代码示例如下：
<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="rectangle">
<corners
ohos:radius="40"/>
<solid
ohos:color="#FFFFFF"/>
</shape>
设置提示文字
<TextField
...
ohos:hint="Enter phone number or email"
ohos:text_input_type="pattern_password"
ohos:text_alignment="vertical_center"/>
设置TextField的内边距
<TextField
...
ohos:left_padding="24vp"
ohos:right_padding="24vp"
ohos:top_padding="8vp"
ohos:bottom_padding="8vp"/>
设置TextField多行显示
<TextField
...
ohos:multiple_lines="true"/>
响应焦点变化
textField.setFocusChangedListener((component, isFocused) -> {
if (isFocused) {
// 获取到焦点
...
} else {
// 失去焦点
...
}
});
3.4、Image图片控件
Image主要是用来显示图片的组件。也可以加载来自网络的图片。共有的xml属性是继承Component，同时也有自己的xml属性：
clip_alignment 图像剪裁对齐方式，包括左对齐剪裁、右对齐、居中对齐等。
image_src 图像源，可直接配置色值，也可引用color资源或引用media/graphic下的图片资源。
scale_mode 图像缩放类型属性如下：
| zoom_center | 表示原图按照比例缩放到与Image最窄边一致，并居中显示。 | ohos:scale_mode=“center” |
|---|---|---|
| zoom_start | 表示原图按照比例缩放到与Image最窄边一致，并靠起始端显示。 | ohos:scale_mode=“zoom_start” |
| zoom_end | 表示原图按照比例缩放到与Image最窄边一致，并靠结束端显示。 | ohos:scale_mode=“zoom_end” |
| stretch | 表示将原图缩放到与Image大小一致。 | ohos:scale_mode=“stretch” |
| center | 表示不缩放，按Image大小显示原图中间部分。 | ohos:scale_mode=“center” |
| inside | 表示将原图按比例缩放到与Image相同或更小的尺寸，并居中显示。 | ohos:scale_mode=“inside” |
| clip_center | 表示将原图按比例缩放到与Image相同或更大的尺寸，并居中显示。 | ohos:scale_mode=“clip_center” |
- 创建Image
在xml中创建Image
<Image
ohos:id="$+id:image"
ohos:width="match_content"
ohos:height="match_content"
ohos:layout_alignment="center"
ohos:image_src="$media:plant"/>
使用代码创建Image
Image image = new Image(getContext());
image.setPixelMap(ResourceTable.Media_plant);
设置透明度
<Image
ohos:id="$+id:image"
ohos:width="match_content"
ohos:height="match_content"
ohos:layout_alignment="center"
ohos:image_src="$media:plant"
ohos:alpha="0.5"/>
设置缩放系数
<Image
ohos:id="$+id:image"
ohos:width="match_content"
ohos:height="match_content"
ohos:layout_alignment="center"
ohos:image_src="$media:plant"
ohos:scale_x="0.5"
ohos:scale_y="0.5"/>
3.5、Picker滑动选择器
Picker提供了滑动选择器，允许用户从预定义范围中进行选择。
Picker的共有XML属性继承自：DirectionalLayout
Picker的自有XML属性见下表：
| 属性名称 | 中文描述 | 取值 | 取值说明 |
|---|---|---|---|
| element_padding | 文本和Element之间的间距Element必须通过setElementFormatter接口配置 | float类型 | 表示间距尺寸的float类型。可以是浮点数值，其默认单位为px；也可以是带px/vp/fp单位的浮点数值；也可以引用float资源。 |
| max_value | 最大值 | integer类型 | 可以直接设置整型数值，也可以引用integer资源。 |
| min_value | 最小值 | integer类型 | 可以直接设置整型数值，也可以引用integer资源。 |
| value | 当前值 | integer类型 | 可以直接设置整型数值，也可以引用integer资源。 |
| normal_text_color | 未选中的文本颜色 | color类型 | 可以直接设置色值，也可以引用color资源。 |
| normal_text_size | 取消选中的文本大小 | float类型 | 表示字体大小的float类型。可以是浮点数值，其默认单位为px；也可以是带px/vp/fp单位的浮点数值；也可以引用float资源。 |
| selected_text_color | 选中的文本颜色 | color类型 | 可以直接设置色值，也可以引用color资源。 |
| selected_text_size | 选中的文本大小 | float类型 | 表示字体大小的float类型。可以是浮点数值，其默认单位为px；也可以是带px/vp/fp单位的浮点数值；也可以引用float资源。 |
| selector_item_num | 显示的项目数量 | integer类型 | 可以直接设置整型数值，也可以引用integer资源。 |
| selected_normal_text_margin_ratio | 已选文本边距与正常文本边距的比例 | float类型 | 可以直接设置浮点数值，也可以引用float浮点数资源。取值范围为>0。 |
| shader_color | 着色器颜色 | color类型 | 可以直接设置色值，也可以引用color资源。 |
| top_line_element | 选中项的顶行 | Element类型 | 可直接配置色值，也可引用color资源或引用media/graphic下的图片资源。 |
| bottom_line_element | 选中项的底线 | Element类型 | 可直接配置色值，也可引用color资源或引用media/graphic下的图片资源。 |
| wheel_mode_enabled | 选择轮是否绕行 | boolean类型 | 可以直接设置true/false，也可以引用boolean资源。 |
- 使用Picker
在xml中创建Picker
<Picker
ohos:id="$+id:test_picker"
ohos:height="match_content"
ohos:width="300vp"
ohos:background_element="#E1FFFF"
ohos:layout_alignment="horizontal_center"
ohos:normal_text_size="16fp"
ohos:selected_text_size="16fp"/>
设置在Picker中的取值范围
Picker picker = (Picker) findComponentById(ResourceTable.Id_test_picker);
picker.setMinValue(0); // 设置选择器中的最小值
picker.setMaxValue(6); // 设置选择器中的最大值
响应选择器变化
picker.setValueChangedListener((picker1, oldVal, newVal) -> {
// oldVal:上一次选择的值； newVal：最新选择的值
});
格式化Picker显示：通过Picker的setFormatter(Formatter formatter)方法，用户可以将Picker选项中显示的字符串修改为特定的格式。
package com.example.myapplication.slice;
import com.example.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Picker;
import ohos.agp.window.dialog.ToastDialog;
public class MainAbilitySlice extends AbilitySlice {
private Picker picker;
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_main);
picker = (Picker)findComponentById(ResourceTable.Id_mypicker);
picker.setMaxValue(15);
picker.setMinValue(1);
picker.setValueChangedListener(new Picker.ValueChangedListener() {
@Override
public void onValueChanged(Picker picker, int i, int i1) {
ToastDialog dialog = new ToastDialog(getContext());
dialog.setText("-->>"+i +"-->"+i1);
dialog.show();
}
});
picker.setFormatter(new Picker.Formatter() {
@Override
public String format(int i) {
String value;
switch (i) {
case 0:
value = "Mon";
break;
case 1:
value = "Tue";
break;
case 2:
value = "Wed";
break;
case 3:
value = "Thu";
break;
case 4:
value = "Fri";
break;
case 5:
value = "Sat";
break;
case 6:
value = "Sun";
break;
default:
value = "" + i;
}
return value;
}
});
}
@Override
public void onActive() {
super.onActive();
}
@Override
public void onForeground(Intent intent) {
super.onForeground(intent);
}
}
- 设置文本相关属性
在xml文件中设置文本属性
<Picker
...
ohos:normal_text_size="16fp"
ohos:normal_text_color="#FFA500"
ohos:selected_text_size="16fp"
ohos:selected_text_color="#00FFFF"/>
在java代码中设置文本样式
picker.setNormalTextFont(Font.DEFAULT_BOLD);
picker.setNormalTextSize(40);
picker.setNormalTextColor(new Color(Color.getIntColor("#FFA500")));
picker.setSelectedTextFont(Font.DEFAULT_BOLD);
picker.setSelectedTextSize(40);
picker.setSelectedTextColor(new Color(Color.getIntColor("#00FFFF")));
设置所选文本的上下边框
在xml中我们可以这样设置
<Picker
...
ohos:bottom_line_element="#40E0D0"
ohos:top_line_element="#40E0D0"/>
在java代码中设置
ShapeElement shape = new ShapeElement();
shape.setShape(ShapeElement.RECTANGLE);
shape.setRgbColor(RgbColor.fromArgbInt(0xFF40E0D0));
// 单独设置上边框
// picker.setDisplayedLinesTopElement(shape);
// 单独设置下边框
// picker.setDisplayedLinesBottomElement(shape);
// 同时设置上下边框
picker.setDisplayedLinesElements(shape, shape);
设置Picker中所选文本框边距和普通文本边距的比例
在xml文件中设置：
<Picker
...
ohos:selected_normal_text_margin_ratio="5.0">
</Picker>
在Java代码中设置
picker.setSelectedNormalTextMarginRatio(5.0f);
3.6、DatePicker日期选择器
DatePicker是一款日期选择器，主要是提供给用户选择日期的。
DatePicker的共有XML属性继承自：StackLayout
DatePicker的自有XML属性见下表：
| 属性名称 | 中文描述 | 取值 | 取值说明 |
|---|---|---|---|
| date_order | 显示格式，年月日 | ||
| 0 | 表示日期以日-月-年的格式显示。 | ||
| 1 | 表示日期以月-日-年的格式显示。 | ||
| 2 | 表示日期以年-月-日的格式显示。 | ||
| 3 | 表示日期以年-日-月的格式显示。 | ||
| 4 | 表示日期以日-月的格式显示。 | ||
| 5 | 表示日期以月-日的格式显示。 | ||
| 6 | 表示日期以年-月的格式显示。 | ||
| 7 | 表示日期以月-年的格式显示。 | ||
| 8 | 表示只显示年份。 | ||
| 9 | 表示只显示月份。 | ||
| 10 | 表示只显示日期。 | ||
| day_fixed | 日期是否固定 | boolean类型 | 可以直接设置true/false，也可以引用boolean资源。 |
| month_fixed | 月份是否固定 | boolean类型 | 可以直接设置true/false，也可以引用boolean资源。 |
| year_fixed | 年份是否固定 | boolean类型 | 可以直接设置true/false，也可以引用boolean资源。 |
| max_date | 最大日期 | long类型 | 可以直接设置长整型值，也可以引用string资源。 |
| min_date | 最小日期 | long类型 | 可以直接设置长整型值，也可以引用string资源。 |
| text_size | 文本大小 | float类型 | 表示尺寸的float类型。可以是浮点数值，其默认单位为px；也可以是带px/vp/fp单位的浮点数值；也可以引用float资源。 |
| normal_text_size | 取消选中文本的大小 | float类型 | 表示尺寸的float类型。可以是浮点数值，其默认单位为px；也可以是带px/vp/fp单位的浮点数值；也可以引用float资源。 |
| selected_text_size | 选中文本的大小 | float类型 | 表示尺寸的float类型。可以是浮点数值，其默认单位为px；也可以是带px/vp/fp单位的浮点数值；也可以引用float资源。 |
| normal_text_color | 取消选中文本的颜色 | color类型 | 可以直接设置色值，也可以引用color资源。 |
| selected_text_color | 选中文本的颜色 | color类型 | 可以直接设置色值，也可以引用color资源。 |
| operated_text_color | 操作项的文本颜色 | color类型 | 可以直接设置色值，也可以引用color资源。 |
| selected_normal_text_margin_ratio | 已选文本边距与正常文本边距的比例 | float类型 | 可以直接设置浮点数值，也可以引用float浮点数资源。取值需>0.0f，默认值为1.0f。 |
| selector_item_num | 显示的项数 | integer类型 | 可以直接设置整型数值，也可以引用integer资源。 |
| shader_color | 着色器颜色 | color类型 | 可以直接设置色值，也可以引用color资源。 |
| top_line_element | 选中项的顶行 | Element类型 | 可直接配置色值，也可引用color资源或引用media/graphic下的图片资源。 |
| bottom_line_element | 选中项的底线 | Element类型 | 可直接配置色值，也可引用color资源或引用media/graphic下的图片资源。 |
| wheel_mode_enabled | 选择轮是否绕行 | boolean类型 | 可以直接设置true/false，也可以引用boolean资源。 |
- 使用DatePicker
在xml中创建DatePicker
<DatePicker
ohos:id="$+id:date_pick"
ohos:height="match_content"
ohos:width="300vp">
</DatePicker>
获取当前选择日期，日/月/年，DatePicker默认选择当前日期。
// 获取DatePicker实例
DatePicker datePicker = (DatePicker) findComponentById(ResourceTable.Id_date_pick);
int day = datePicker.getDayOfMonth();
int month = datePicker.getMonth();
int year = datePicker.getYear();
响应日期改变事件
在XML中添加Text显示选择日期：
<Text
ohos:id="$+id:text_date"
ohos:height="match_content"
ohos:width="match_parent"
ohos:hint="date"
ohos:margin="8vp"
ohos:padding="4vp"
ohos:text_size="14fp">
</Text>
在Java代码中响应日期改变事件：
Text selectedDate = (Text) findComponentById(ResourceTable.Id_text_date);
datePicker.setValueChangedListener(
new DatePicker.ValueChangedListener() {
@Override
public void onValueChanged(DatePicker datePicker, int year, int monthOfYear, int dayOfMonth) {
selectedDate.setText(String.format("%02d/%02d/%4d", dayOfMonth, monthOfYear, year));
}
}
);
- 文本样式设置
文本相关内容
设置待选项的字体大小和颜色
<DatePicker
...
ohos:normal_text_color="#00FFFF"
ohos:normal_text_size="20fp">
</DatePicker>
设置已选项的字体大小和颜色
在xml中设置
<DatePicker
...
ohos:selected_text_color="#00FFFF"
ohos:selected_text_size="20fp">
</DatePicker>
在代码中设置：
datePicker.setSelectedTextSize(40);
datePicker.setSelectedTextColor(new Color(Color.getIntColor("#FFA500")));
设置操作字体的颜色
在xml中设置
<DatePicker
...
ohos:operated_text_color="#00FFFF">
</DatePicker>
在代码中设置
datePicker.setOperatedTextColor(new Color(Color.getIntColor("#00FFFF")));
设置DatePicker中所选文本边距与普通文本边距的比例
<DatePicker
...
ohos:selected_normal_text_margin_ratio="10">
</DatePicker>
在代码中设置：
datePicker.setSelectedNormalTextMarginRatio(10.0f)
3.7、TimePicker时间选择器
TimePicker主要是提供用户选择时间，TimePicker的共有XML属性是继承：StackLayout布局。
TimePicker的自有XML属性见下：
am_pm_order 表示上午下午排列顺序，取值为0，1，2，3 分别表示am/pm列靠时间选择器在起端显示、结束端显示、左侧显示、右侧显示。
mode_24_hour 是否24小时制显示，取值为boolean类型。
hour、minute、second 表示 小时、分钟、秒 都是用整数类型来表示，其中小时的范围是023、分钟是059、秒是0~59。
normal_text_color 表示取消选中文本的颜色，可以设置颜色值，也可以引用color资源。
selected_text_color 选中文本颜色，可以设置颜色值，也可以引用color资源。
operated_text_color 操作项文本颜色，可以设置颜色值，也可以引用color资源。
wheel_mode_enabled 选择是否绕行，取值为boolean类型。
- 使用TimePicker
创建TimePicker
<TimePicker
ohos:id="$+id:time_picker"
ohos:height="match_content"
ohos:width="match_parent" />
创建一个默认的TimePicker的效果
获取时间
TimePicker timePicker = (TimePicker) findComponentById(ResourceTable.Id_time_picker);
int hour = timePicker.getHour();
int minute = timePicker.getMinute();
int second = timePicker.getSecond();
设置时间
timePicker.setHour(19);
timePicker.setMinute(18);
timePicker.setSecond(12);
响应时间改变事件
timePicker.setTimeChangedListener(new TimePicker.TimeChangedListener() {
@Override
public void onTimeChanged(TimePicker timePicker, int hour, int minute, int second) {
...
}
});
- 显示样式配置
设置字体属性
- 设置未选中字体的颜色和大小
<TimePicker
...
ohos:normal_text_color="#007DFF"
ohos:normal_text_size="20fp"
/>
设置未选中字体的颜色和大小的效果
- 设置选中字体的颜色和大小
<TimePicker
...
ohos:selected_text_color="#007DFF"
ohos:selected_text_size="20fp"
/>
设置选中字体的颜色和大小效果
- 设置操作项文本颜色
<TimePicker
...
ohos:operated_text_color="#FF9912"
/>
操作项文本颜色设置效果
- 设置TimePicker中所选文本边距与普通文本边距的比例
<TimePicker
...
ohos:selected_normal_text_margin_ratio="10"
/>
选中与未选中文本间隔效果
- 设置着色器颜色
<TimePicker
...
ohos:shader_color="#00BFFF"
/>
配置着色器颜色效果
- 设置选中时间的上下边框
<TimePicker
...
ohos:bottom_line_element="#00BFFF"
/>
设置上下区域分割线颜色效果
- 设置12小时制下显示样式
AM/PM默认置于左侧，如需位于右边：
<TimePicker
...
ohos:am_pm_order="1"
/>
效果图如下：
3.8、Switch开关控件
Switch是切换单个设置开关两种状态的组件
Switch支持的XML属性都是继承自：TEXT控件
Switch的自有XML属性如下：
text_state_on属性
用于开启时显示文本，可以直接设置文本字串，也可以引用string资源。ohos:text_state_on=“联系” ohos:text_state_on=“$string:test_str”
text_state_off属性
关闭时显示的文本，可以直接设置文本字串，也可以引用string资源。ohos:text_state_on=“联系” ohos:text_state_on=“$string:test_str”
track_element属性
轨迹样式，Element类型，可直接配置色值，也可引用color资源或引用media/graphic下的图片资源。ohos:track_element=“#FF0000FF”
ohos:track_element=“ c o l o r : b l a c k " o h o s : t r a c k e l e m e n t = " color:black" ohos:track_element=" color:black"ohos:trackelement="media:media_src” ohos:track_element=“$graphic:graphic_src”
check_element属性
状态标志样式 Element类型，可直接配置色值，也可引用color资源或引用media/graphic下的图片资源。ohos:check_element=“#000000”
ohos:check_element=“ c o l o r : b l a c k " o h o s : c h e c k e l e m e n t = " color:black" ohos:check_element=" color:black"ohos:checkelement="media:media_src” ohos:check_element=“$graphic:graphic_src”
效果图如下：
[外链图片转存中…(img-ZErqr3sk-1707073906697)]
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
22
0- 0
已为社区贡献5条内容
所有评论(0)