Aspect Ratio 宽高比

按指定的宽高比显示内容。

基础用法

SAspectRatio({ ratio: 16 / 9 }) {
  Image($r('app.media.background'))
    .width('100%')
    .height('100%')
    .objectFit(ImageFit.Cover)
}

网页近似预览，真机效果以 HarmonyOS 渲染为准。

比例

SAspectRatio({ ratio: 4 / 3 }) { ... }

网页近似预览，真机效果以 HarmonyOS 渲染为准。

API

从组件库源码中的 @Param / @Event / @BuilderParam 声明自动提取。

SAspectRatio

shadcn-vue 的 AspectRatio：一个宽度占满的容器，其高度由 ratio（宽 / 高）决定。子组件居中排列；若要填满，可设置 width('100%').height('100%')（例如使用 objectFit(ImageFit.Cover) 的 Image）。

属性	类型	默认值	说明
ratio	number	1	宽 / 高，例如 16 / 9。
modifier	AttributeModifier<StackAttribute>	new SparkNoopModifier<StackAttribute>()

插槽: 子组件（尾随闭包）