1 Star 3 Fork 0

蓝不蓝编程-子号/鸿蒙基础样例harmonyos_demos

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
buttonDemo
checkBoxDemo
datePickerDemo
dbDemo
dependentLayoutDemo
directionLayoutDemo
gradle/wrapper
imageDemo
src/main
.gitignore
README.md
build.gradle
proguard-rules.pro
listContainerDemo
logDemo
networkDemo
pageAbilityDemo
pageFlipperDemo
pageSliderDemo
permissionDemo
pickerDemo
positionLayoutDemo
preferenceDemo
progressBarDemo
radioButtonDemo
roundProgressBarDemo
sliderDemo
stackLayoutDemo
switchDemo
tabListDemo
tableLayoutDemo
textDemo
textFieldDemo
timePickerDemo
toastDemo
toggleButtonDemo
webviewDemo
.gitignore
LICENSE
README.md
build.gradle
gradle.properties
gradlew
gradlew.bat
settings.gradle
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

什么是Image

Image是用于显示图片的UI控件.

基础样例

1.展示本地图片

效果图

代码

<Image
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:scale_mode="clip_center"
        ohos:image_src="$media:beauty"/>

图片文件放在resources/base/media下

2.展示网络图片

效果图

代码

使用第三方开源库Glide加载网络图片

Image image = (Image) findComponentById(ResourceTable.Id_image);
Uri uri =Uri.parse("https://c-ssl.duitang.com/uploads/blog/202105/21/20210521205533_613b9.jpg");
Glide.with(getContext()).load(uri).into(image);

完整代码:

    1. build.gradle中添加依赖
implementation 'io.openharmony.tpc.thirdlib:glide:1.1.2'
    1. 完整加载图片代码
public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main_net);
        Image image = (Image) findComponentById(ResourceTable.Id_image);
        Uri uri =Uri.parse("https://c-ssl.duitang.com/uploads/blog/202105/21/20210521205533_613b9.jpg");
        Glide.with(getContext()).load(uri).into(image);
    }
}

基础样例完整源代码

https://gitee.com/hspbc/harmonyos_demos/tree/master/imageDemo

常用属性说明

属性名 用途
ohos:width 设置控件宽度,可设置为:match_parent(和父控件一样),match_content(按照内容自动伸缩),设置固定值(如200vp)
ohos:height 设置控件高度,可设置为:match_parent(和父控件一样),match_content(按照内容自动伸缩),设置固定值(如200vp)
ohos:layout_alignment 在父控件内对齐方式,可选值:left:居左;start:居左;center:居中;right:居右;end:居右
ohos:background_element 设置背景,可以是色值(如#FF0000)或图片等
ohos:visibility 可选值: visible(显示), invisible(隐藏,但是仍占据UI空间),hide(隐藏,且不占UI空间)
ohos:image_src 设置图片,样例:ohos:image_src="$media:icon"
ohos:scale_mode 设置图片缩放模式,可选值:zoom_center:居中缩放展示;zoom_start:居上缩放展示;zoom_end:居下缩放展示;center:居中展示(不缩放);clip_center:居中裁剪;inside:左右拉伸铺满屏幕;stretch:上下拉伸铺满屏幕;

更多属性及实际效果,可以在开发工具里自行体验.

关于我

厦门大学计算机专业 | 前华为工程师
专注分享编程技术,没啥深度,但是易懂。
Java | 安卓 | 前端 | 小程序 | 鸿蒙
公众号:花生皮编程

马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/hspbc/harmonyos_demos.git
git@gitee.com:hspbc/harmonyos_demos.git
hspbc
harmonyos_demos
鸿蒙基础样例harmonyos_demos
master

搜索帮助