openharmony/applications_app_samples
1
0
Fork 0
mirror of https://gitee.com/openharmony/applications_app_samples synced 2024-11-27 02:30:43 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

【Sample】【基础能力】支持文本和图片的混合显示

Browse Source 
Signed-off-by: 13415019609 <minyin.weng@unionman.com.cn>
This commit is contained in:
13415019609 2023-07-28 17:00:54 +08:00
parent 389c609f2c
commit ac765ea703
12 changed files with 448 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
code/UI/ArkTsComponentCollection/ComponentCollection/README_zh.md
View File

@ -127,6 +127,9 @@ entry/src/main/ets/
| | | |---scrollSample
| | | | |---ScrollSample.ets
| | |---textAndInput
| | | |---imageSpanSample
| | | | |---ChangePanel.ets
| | | | |---imageSpanSample.ets // 行内图像
| | | |---richTextSample
| | | | |---RichTextSample.ets // 富文本
| | | |---spanSample
@ -278,9 +281,9 @@ entry/src/main/ets/
使用getStringArrayData，getStringData获取数据[ResourceDataHandle.ets](entry/src/main/ets/data/ResourceDataHandle.ets)
* 文本与输入
* 使用全局组件ShowToast，TitleBar，AttributeModificationTool,IntroductionTitle实现行内文本，文本输入，文本，富文本组件功能
*
使用getStringArrayData，getStringData获取数据[ResourceDataHandle.ets](entry/src/main/ets/data/ResourceDataHandle.ets)
* 使用全局组件ShowToast，TitleBar，AttributeModificationTool,IntroductionTitle实现行内文本，行内图像，文本输入，文本，富文本组件功能
*
使用getStringArrayData，getStringData获取数据[ResourceDataHandle.ets](entry/src/main/ets/data/ResourceDataHandle.ets)
* 辅助
* 使用全局组件TitleBar实现标记，滚动条，下拉刷新，弹出面板，字母索引条组件功能

4
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/ComponentData.ets
View File

@ -152,6 +152,10 @@ const TEXT_AND_INPUT: ThirdLevelCategory =
image: $r('app.media.ic_text_and_input'),
title: $r('app.string.text_and_input'),
childNodes: [
{
title: $r('app.string.image_span_title'),
url: 'pages/components/textAndInput/imageSpanSample/ImageSpanSample'
},
{
title: $r('app.string.span_title'),
url: 'pages/components/textAndInput/spanSample/SpanSample'

92
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/imageSpanSample/ChangePanel.ets Normal file
View File

@ -0,0 +1,92 @@
/*
* Copyright (c) 2022-2023 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { CommonItemSlider, CommonItemSelect, CommonItemColorSelect } from '../../../../common/AttributeModificationTool'
import { selectData } from '../../ComponentData'
import { getStringArrayData } from '../../../../data/ResourceDataHandle'
@Component
export struct ChangeVerticalAlign {
@Link imageSpanAlignment: ImageSpanAlignment
build() {
Column() {
CommonItemSelect({
testId: 'alignment',
name: $r('app.string.image_span_vertical_align'),
selects: [$r('app.string.image_span_alignment_baseline'),
$r('app.string.image_span_alignment_center'),
$r('app.string.image_span_alignment_top'),
$r('app.string.image_span_alignment_bottom')],
callback: (index) => {
switch (index) {
case 0:
this.imageSpanAlignment = ImageSpanAlignment.BASELINE
break
case 1:
this.imageSpanAlignment = ImageSpanAlignment.CENTER
break
case 2:
this.imageSpanAlignment = ImageSpanAlignment.TOP
break
default:
this.imageSpanAlignment = ImageSpanAlignment.BOTTOM
}
}
})
.margin({ top: 12 })
}
}
}
@Component
export struct ChangeObjectFit {
@Link imageFit : ImageFit
build() {
Column() {
CommonItemSelect({
testId: 'fit',
name: $r('app.string.image_span_object_fit'),
selects: [$r('app.string.image_fit_contain'),
$r('app.string.image_fit_auto'),
$r('app.string.image_fit_fill'),
$r('app.string.image_fit_none'),
$r('app.string.image_fit_cover')],
callback: (index) => {
switch (index) {
case 0:
this.imageFit = ImageFit.Contain
break
case 1:
this.imageFit = ImageFit.Auto
break
case 2:
this.imageFit = ImageFit.Fill
break
case 3:
this.imageFit = ImageFit.ScaleDown
break
case 4:
this.imageFit = ImageFit.None
break
default:
this.imageFit = ImageFit.Cover
}
}
})
.margin({ top: 12 })
}
}
}

74
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/imageSpanSample/ImageSpanSample.ets Normal file
View File

@ -0,0 +1,74 @@
/*
* Copyright (c) 2022-2023 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http:// www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { ChangeVerticalAlign, ChangeObjectFit } from './ChangePanel'
import { IntroductionTitle } from '../../../../common/IntroductionTitle'
import { TitleBar } from '../../../../common/TitleBar'
@Extend(Column) function backgroundStyle() {
.size({ width: '100%' })
.margin({ top: 12 })
.padding(12)
.borderRadius(24)
.justifyContent(FlexAlign.SpaceBetween)
.backgroundColor(Color.White)
}
@Entry
@Component
struct ImageSpanSample {
@State imageSpanAlignment: ImageSpanAlignment = ImageSpanAlignment.BOTTOM
@State imageFit: ImageFit = ImageFit.Cover
build() {
Column() {
TitleBar({ title: $r('app.string.image_span_title') })
Scroll() {
Column() {
IntroductionTitle({ introduction: $r('app.string.image_span_and_span') })
Column() {
Text(){
Span($r('app.string.text_content_en_first'))
ImageSpan($r('app.media.banner'))
.verticalAlign(this.imageSpanAlignment)
.objectFit(this.imageFit)
.width(400)
.height(350)
.border({ width: 1 })
Span($r('app.string.text_content_en_last'))
}
}
.backgroundStyle()
IntroductionTitle({ introduction: $r('app.string.image_span_vertical_align_and_object_fit') })
Column() {
ChangeVerticalAlign({
imageSpanAlignment: $imageSpanAlignment
})
ChangeObjectFit({
imageFit: $imageFit
})
}
.backgroundStyle()
.margin({ bottom: 80 })
}
.constraintSize({ minHeight: '100%' }) // Let the minHeight of the component cover screen at least
}
.height('100%')
.padding({ left: 12, right: 12 })
}
.backgroundColor($r('app.color.background_shallow_grey'))
}
}

69
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/base/element/string.json
View File

@ -1082,6 +1082,67 @@
"name": "span_decoration_overline",
"value": "Overline"
},
//ImageSpan
{
"name": "image_span_title",
"value": "Image Span"
},
{
"name": "image_span_vertical_align",
"value": "Vertical Align"
},
{
"name": "image_span_alignment_baseline",
"value": "Baseline"
},
{
"name": "image_span_alignment_bottom",
"value": "Bottom"
},
{
"name": "image_span_alignment_center",
"value": "Center"
},
{
"name": "image_span_alignment_top",
"value": "Top"
},
{
"name": "image_span_object_fit",
"value": "Object Fit"
},
{
"name": "image_fit_contain",
"value": "Contain"
},
{
"name": "image_fit_auto",
"value": "Auto"
},
{
"name": "image_fit_fill",
"value": "Fill"
},
{
"name": "image_fit_none",
"value": "None"
},
{
"name": "image_fit_scale_down",
"value": "Scale Down"
},
{
"name": "image_fit_cover",
"value": "Cover"
},
{
"name": "image_span_and_span",
"value": "image span and span"
},
{
"name": "image_span_vertical_align_and_object_fit",
"value": "image span vertical align and object fit"
},
// Text
{
"name": "text_title",
@ -1095,6 +1156,14 @@
"name": "text_content_en",
"value": "Steel is tempered in fire and sharp cooling, so it can be hard and not afraid of anything. It is also in this way that our generation has been tempered in struggles and terrible trials, learning not to succumb to life."
},
{
"name": "text_content_en_first",
"value": "Steel is tempered in fire and sharp cooling, so it can be hard and not afraid of anything. "
},
{
"name": "text_content_en_last",
"value": "It is also in this way that our generation has been tempered in struggles and terrible trials, learning not to succumb to life. "
},
{
"name": "text_text_align_center",
"value": "Center"

1
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/base/profile/main_pages.json
View File

@ -11,6 +11,7 @@
"pages/components/buttonAndSelection/toggleSample/ToggleSample",
"pages/components/informationPresentationAndDynamicEffects/qrCodeSample/QRCodeSample",
"pages/animations/interpolationCalculationSample/InterpolationCalculationSample",
"pages/components/textAndInput/imageSpanSample/ImageSpanSample",
"pages/components/textAndInput/spanSample/SpanSample",
"pages/components/textAndInput/textInputSample/TextInputSample",
"pages/components/textAndInput/textSample/TextSample",

61
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/en/element/string.json
View File

@ -1053,6 +1053,67 @@
"name": "span_decoration_overline",
"value": "Overline"
},
// ImageSpan
{
"name": "image_span_title",
"value": "Image Span"
},
{
"name": "image_span_vertical_align",
"value": "Vertical Align"
},
{
"name": "image_span_alignment_baseline",
"value": "Baseline"
},
{
"name": "image_span_alignment_bottom",
"value": "Bottom"
},
{
"name": "image_span_alignment_center",
"value": "Center"
},
{
"name": "image_span_alignment_top",
"value": "Top"
},
{
"name": "image_span_object_fit",
"value": "Object Fit"
},
{
"name": "image_fit_contain",
"value": "Contain"
},
{
"name": "image_fit_auto",
"value": "Auto"
},
{
"name": "image_fit_fill",
"value": "Fill"
},
{
"name": "image_fit_none",
"value": "None"
},
{
"name": "image_fit_scale_down",
"value": "Scale Down"
},
{
"name": "image_fit_cover",
"value": "Cover"
},
{
"name": "image_span_and_span",
"value": "image span and span"
},
{
"name": "image_span_vertical_align_and_object_fit",
"value": "image span vertical align and object fit"
},
// Text
{
"name": "text_title",

61
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/zh/element/string.json
View File

@ -1013,6 +1013,67 @@
"name": "span_decoration_color",
"value": "装饰线颜色"
},
//ImageSpan
{
"name": "image_span_title",
"value": "ImageSpan 行内图像"
},
{
"name": "image_span_vertical_align",
"value": "设置跨度对齐方式"
},
{
"name": "image_span_alignment_baseline",
"value": "基线"
},
{
"name": "image_span_alignment_bottom",
"value": "底部"
},
{
"name": "image_span_alignment_center",
"value": "中心"
},
{
"name": "image_span_alignment_top",
"value": "顶部"
},
{
"name": "image_span_object_fit",
"value": "设置图像缩放类型"
},
{
"name": "image_fit_contain",
"value": "包含"
},
{
"name": "image_fit_auto",
"value": "自适应显示"
},
{
"name": "image_fit_fill",
"value": "填满"
},
{
"name": "image_fit_none",
"value": "保持大小并将其显示在中心"
},
{
"name": "image_fit_scale_down",
"value": "按比例缩小或保持不变"
},
{
"name": "image_fit_cover",
"value": "掩蔽"
},
{
"name": "image_span_and_span",
"value": "文本图像混合显示"
},
{
"name": "image_span_vertical_align_and_object_fit",
"value": "设置行内图像的跨度对齐方式和缩放类型"
},
// Text
{
"name": "text_title",

41
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/ets/test/Ability.test.ets
View File

@ -1013,6 +1013,47 @@ export default function abilityTest() {
Logger.info(BUNDLE + testName + ' end');
})
/**
* ImageSpan 行内图像
*/
it(BUNDLE + 'ImageSpanFunction_001', 0, async function () {
let testName = 'ImageSpanFunction';
Logger.info(BUNDLE + testName + ' begin');
let driver: Driver = Driver.create();
await driver.delayMs(DELAY_TIME);
// 进入Span 行内文本
let atom = await manager.getStringValue($r('app.string.image_span_title'));
let button = await driver.findComponent(ON.text(atom));
if (!button) {
// 如果没展开 就展开
await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.text_and_input')));
}
await checkButtonAndClickWithText(atom);
// 展开跨度对齐方式
await checkButtonAndClickWithID('alignment');
// 选择一个center
let center = await manager.getStringValue($r('app.string.image_span_alignment_center'));
await checkButtonAndClickWithText(center);
// 展开图像缩放类型
await checkButtonAndClickWithID('fit');
// 选择一个contain
let contain = await manager.getStringValue($r('app.string.image_fit_contain'));
await checkButtonAndClickWithText(contain);
// 返回
let backBtn = await driver.findComponent(ON.id('backBtn'));
await backBtn.click();
await driver.delayMs(500);
Logger.info(BUNDLE + testName + ' end');
})
/**
* Span 行内文本
*/

13
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/resources/base/element/string.json
View File

@ -1175,6 +1175,19 @@
"name": "text_text_case_lowercase",
"value": "Lowercase"
},
// ImageSpan
{
"name": "image_span_title",
"value": "Image Span"
},
{
"name": "image_span_alignment_center",
"value": "Center"
},
{
"name": "image_fit_contain",
"value": "Contain"
},
// TextInput
{
"name": "text_input_title",

13
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/resources/en/element/string.json
View File

@ -1085,6 +1085,19 @@
"name": "text_text_case_lowercase",
"value": "Lowercase"
},
// ImageSpan
{
"name": "image_span_title",
"value": "Image Span"
},
{
"name": "image_span_alignment_center",
"value": "Center"
},
{
"name": "image_fit_contain",
"value": "Contain"
},
// TextInput
{
"name": "text_input_title",

13
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/resources/zh/element/string.json
View File

@ -1045,6 +1045,19 @@
"name": "text_text_case_lowercase",
"value": "小写"
},
// ImageSpan
{
"name": "image_span_title",
"value": "ImageSpan 行内图像"
},
{
"name": "image_span_alignment_center",
"value": "中心"
},
{
"name": "image_fit_contain",
"value": "包含"
},
// TextInput
{
"name": "text_input_title",