Flutter 调整宽高比

Flutter 调整宽高比(AspectRatio)，AspectRatio的作用是根据设置调整子元素child的宽高比，Flutter提供此组件，就免去了自定义所带来的麻烦。AspectRatio适用于需要固定宽高比的情景。

AspectRatio的布局行为分为两种情况：

• AspectRatio首先会在布局限制条件允许的范围内尽可能地扩展，Widget的高度是由宽度和比率决定的，类似于BoxFit中的contain，按照固定比率去尽量占满区域。
• 如果在满足所有限制条件后无法找到可行的尺寸，AspectRatio最终将会优先适应布局限制条件，而忽略所设置的比率。

AspectRatio主要属性如下所示：

接下来我们写一个小示例，示例代码定义了一个高度为200的区域，内部AspectRatio比率设置为1.5，最终AspectRatio是宽300、高200的一个区域。示例代码如下：

import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AspectRatio调整宽高比示例'),
      ),
      body: Container(
        height: 200.0,
        child: AspectRatio(
          aspectRatio: 1.5,//比例可以调整
          child: Container(
              color: Colors.green,
          ),
        ),
      ),
    );
  }
}
void main() {
  runApp(
    MaterialApp(
      title: 'AspectRatio调整宽高比',
      home: LayoutDemo(),
    ),
  );
}

注意AspectRatio不能为null，其值必须大于0且必须是有限的。

上述示例代码的视图展现大致如图所示:

酷客教程相关文章：

• Flutter 限定最大宽高布局
• Flutter 限定最大最小宽高布局
• Flutter 设置具体尺寸
• Flutter 溢出父容器显示