HarmonyOS 鸿蒙Next API 10 显示图文样式

HarmonyOS 鸿蒙Next API 10 显示图文样式 首先直接看效果吧：

为了实现这个效果，我在HarmonyOS 4.0 API 9，思考了很多方法，包括Flex布局，Row布局，甚至WaterFlow布局，最后还思考了通过RichText富文本来实现，的确可以实现，但是需要写div太麻烦了，我对这个太难受了写的。还是想其他方法，最后找资料发现OpenHarmony SDK 里面的API10实现了。

那我就想办法下载最新SDK，发现没有这个版本，我下载的官网最新的DevEco Studio 3.1.1 Release 版本没有最新API10下载。

于是我找到了最新的：DevEco Studio 4.0 Release 版本：4.0.0.600

大家有兴趣可以去下载～

下载到本地，新建项目，跟普通的HarmonyOS选择不一样，需要选择OpenHarmony项目：

选择之后，直接下一步到结束。

这个时候需要下载SDK，选择OpenHarmony。然后下载API10：

这里选择一定要选择OpenHarmony SDK，因为只有这个有API10。

可惜我运行不了啊，我的手机只能运行9.0的项目。没办法，模拟器也没有10。我只能看看预览，不运行真机了。第一个截图就是预览截图。

最后上代码：

这个ImageSpan属性，我试了边距属性，都没用，想的办法是文字加空格。


更多关于HarmonyOS 鸿蒙Next API 10 显示图文样式的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

如果高度上，图片比文案小，想让ImageSpan居中呢?好像布局的margin都无法生效

更多关于HarmonyOS 鸿蒙Next API 10 显示图文样式的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


Text(this.message)
ImageSpan($r(‘app.media.icon’)).width(10).height(10).margin({bottom:7})
Span(‘文字在后面文字在后面文字在后面文字在后面文字在后面’).fontColor(Color.Blue).fontSize(20)

是的，我是跟你方式一样安装，因为之前装了9，所以装10就装在同一个目录了，然后提示安装sdk10，一样的，

cke_1323.png

这样吧，你加我主页QQ群，我把我demo发你，你直接打开我demo，看有没有问题。

姓名：张三
职业：软件工程师
简介：具有五年以上软件开发经验，熟悉多种编程语言和技术。

HarmonyOS鸿蒙Next API 10中，显示图文样式主要通过Text和Image组件实现。Text组件用于显示文本内容，支持设置字体大小、颜色、对齐方式等属性。Image组件用于显示图片，支持设置图片源、缩放模式、尺寸等属性。开发者可以通过组合Text和Image组件来实现图文混排的效果。

在布局方面，可以使用Column、Row、Stack等容器组件来组织Text和Image组件的位置关系。例如，Column组件可以垂直排列多个子组件，Row组件可以水平排列多个子组件，Stack组件可以将多个子组件叠加在一起。

此外，鸿蒙Next API 10还提供了RichText组件，支持在单个文本组件中嵌入图片、超链接等复杂内容。通过设置RichText的text属性，开发者可以定义包含多种样式的富文本内容。

在样式设置方面，鸿蒙Next API 10支持使用ResourceManager管理全局样式资源，开发者可以在resources目录下定义样式文件，并在代码中引用这些样式资源，实现样式的统一管理和复用。

总结来说，HarmonyOS鸿蒙Next API 10通过Text、Image、RichText等组件以及Column、Row、Stack等布局容器，提供了灵活的图文显示能力，开发者可以根据需求组合这些组件来实现复杂的图文样式效果。

回到顶部