宽度根据屏幕宽度百分比确定后，高度如何设置成与宽度相同的问题

​ 先交代一下问题的背景：

我在做一个多图上传的插件，我希望一行显示3张图片，并且每个都是正方形，那么在理想情况下，每个图片的宽度应该是屏幕宽度的三分之一，如果再考虑到间距的问题，我希望设置为：屏幕宽度的三分之一  - 20

效果如图

在开发过程中，我遇到了问题，即把宽度设置为屏幕宽度的三分之一很容易，直接33%就可以了（父组件100%宽度），但是高度如何设置成33%屏幕宽度呢？在写web或者小程序的时候就很简单，直接33vw就可以了，但是ArkUI里没有vw这个属性。

一开始的思路是，直接获取屏幕的宽度数值，然后动态计算，这里用的是@ohos.display (屏幕属性)，具体获取的代码如下

display.getAllDisplayPhysicalResolution().then((r)=>{
  this.imgwidth = px2vp(r[0].physicalWidth) / 3 - 20;
})

这种写法的好处在于，能够获取到真实的屏幕宽度数据，即数据是准确的，但是问题在于，由于是用到了设备相关的属性，所以需要用模拟器或者真机才能测试，在预览器中是无法显示的，这对于开发来说不太方便，刚开始我还花了很长时间研究为什么这个组件没有在屏幕里出来……当然，除此之外，这种写法还会带来性能上的问题。

于是我开始找寻其他的替代方法

其实把这个问题拆解以后，我的目的实际上是让每个图片的高度=宽度，而宽度是可以通过calc动态计算获取的，那么只要保证高宽比为1，就能确保高度与宽度一致了，对于这个要求，通用属性的aspectRatio就可以满足了

aspectRatio(value: number)

指定当前组件的宽高比，aspectRatio=width/height。

仅设置width、aspectRatio时，height=width/aspectRatio。 仅设置height、aspectRatio时，width=height*aspectRatio。 同时设置width、height和aspectRatio时，height不生效，height=width/aspectRatio。 因此，只要把这个值设置为1就能成功实现目的

具体代码如下：

    .width('calc(33.33% - 20vp)')
    .aspectRatio(1)

​