Flutter-aspectRatio

程序员里的BUG

已于 2023-04-25 11:32:30 修改

阅读量204

点赞数

分类专栏： Flutter 文章标签： flutter android

于 2023-03-13 15:34:04 首次发布

本文链接：https://blog.csdn.net/m0_48259951/article/details/129494248

版权

Flutter 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

AspectRatiowidget用于保持子组件的固定宽高比，在空间允许的情况下按比例扩展。当布局限制不允许时，它会优先适应布局条件。示例展示了如何创建一个宽度为屏幕宽度，高度为其一半的黄色Container。

摘要由CSDN通过智能技术生成

AspectRatio的作用是根据设置调整子元素child的宽高比。
AspectRatio首先会在布局限制条件允许的范国内尽可能的扩展widget的高度是由宽度和比率决定的，类似于BoxFit中的contain，按照固定比率去尽量占满区域
如果在满足所有限制条件过后无法找到一个可行的尺寸，AspectRatio最终将会去优先适应布局限制条件，而忽路所设置的比率。

属性	说明
aspectRatio	宽高比，最终可能不会根据这个值去布局，具体则要看综合因素，外层是否允许按照这种比率进行布局，这只是一个参考值
child	子组件

class Myapp extends StatelessWidget {
  const Myapp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;

    return AspectRatio(
      aspectRatio: 2 / 1,
      child: Container(
        color: Colors.yellow,
      ),
    );
  }

  /// 需求：页面上显示一个容器 宽度是屏幕的宽度 高度是容器宽度的一半
}