Flutter 调整宽高比

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

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

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

AspectRatio主要属性如下所示:
Flutter 调整宽高比

接下来我们写一个小示例,示例代码定义了一个高度为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 调整宽高比

酷客教程相关文章:

赞(0)

评论 抢沙发

评论前必须登录!