02.鸿蒙HarmonyOS卡片卡片布局

原创

jinbeen 2022-01-05 09:48:57 博主文章分类：鸿蒙卡片开发实践 ©著作权

文章标签 鸿蒙华为 harmonyos ico 缩放 文章分类 后端开发

©著作权归作者所有：来自51CTO博客作者jinbeen的原创作品，请联系作者获取转载授权，否则将追究法律责任

官方文档

开发文档

实践

卡片要求的vp总宽高是 150*150，1dp=1vp。fp px vp有啥区别，什么时候用哪个？
主要还是看Image和相对布局DependentLayout的一些属性

背景一般是选择纯色ohos:background_element="#937DFF"，或者是一个图片背景，一般是图片背景再加上一些局部的图片，因为如果全部是图片，设置为46桌面图标显示时，原本是150150的图会被压缩或拉伸，会比较难看。

背景图

    <Image
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:image_src="$media:card_bg"
        ohos:layout_alignment="center"
        ohos:scale_mode="clip_center"/>

match_parent ：和安卓一样是撑满整个屏幕

match_content：相对于安卓的wrap_content

scale_mode：

背景图设置的是：clip_center(表示将原图按比例缩放到与Image相同或更大的尺寸，并居中显示。)
局部的图片使用的是：zoom_start(表示原图按照比例缩放到与Image最窄边一致，并靠起始端显示。)

局部的图

    <Image
        ohos:height="65vp"
        ohos:width="match_parent"
        ohos:image_src="$media:card_book_text_icon"
        ohos:left_margin="5vp"
        ohos:right_margin="4vp"
        ohos:scale_mode="zoom_start"
        ohos:top_margin="25vp"/>

基本width=“match_parent”，因为如果写死在不是正方形的时候还是会有异常，设置高度就行，然后设置左右边距。如果是文字或其他的布局也是如此，宽度基本是match_parent。