第六十九回：AspectRatio Widget

我们在上一章回中介绍了Card Widget相关的内容，,本章回中将介绍 AspectRatio Widget.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们将要介绍的AspectRatio Widget是一个布局约束类组件，在二十一章回中介绍过这方面的内容，这里做一个简单的知识回顾：布局约束表示可以控制其它Widget大小，Flutter中提供了一些Widget,它们专门用来控制其它Widget的大小，我将它们称作约束布局类Widget.这个知识应该在二十一章回中介绍，AspectRatio组件属于约束类组件，只是我们将它遗漏了，直到上一章回中使用时才发现，因此在本章回中立即补上，算是亡羊补牢吧。

AspectRatio组件主要约束子组件的宽高比(width:height)，常用来约束图片或者视频类组件，比如看电影时宽高比为16：9时效果要好一些(与电影有关，不是所有电影都是这种宽高比),本章回中将介绍它的使用方法。

使用方法

AspectRatio组件提供的属性不多，这些属性主要用来控制子组件，下面是各个属性的功能：

• child属性：主要用来存放子组件；
• aspectRatio属性：主要用来控制子组件的宽高比；

在实际项目中child属性常用来存放图片或者视频类的组件。aspectRadion是必选属性，该属性是double类型，经常使用4/3,16/9这样的值给它赋值，这么做显的更加直观一些，而且方便我们知道子组件的宽高比。

示例代码

AspectRatio(
  aspectRatio: 16 / 9,
  //对图片做剪裁，主要是切圆角
  child: ClipRRect(
    //四个方向都设置圆角
    borderRadius: BorderRadius.all(Radius.circular(28)),
    child: Image(
      image: AssetImage("images/ex.png"),
      fit: BoxFit.cover,
    ),
  ),
),

我们在上面的示例代码中使用AspectRatio组件对图片组件进行了约束，将图片的宽高比设定为16:9.为了使图片更加好看一些，我们在图片组件外层嵌套了一个剪切组件，通过该组件把图剪切成圆角矩形。关于剪切类组件的用法，我们在后面章回中再详细介绍。

编译并且运行上面的程序可以看到圆角图片，我在这里就不演示程序的运行结果了，建议大家自动动手去实践，亲自调试一下宽高比，体会一下不同宽高比时图片的显示效果。

看官们，关于AspectRatio Widget相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!