Flutter深入浅出组件篇---AspectRatio、FractionallySizedBox flutter

AspectRatio介绍 AspectRatio 主要的作用是调整子组件设定的宽高比，如播放视频时16:9或4:3等。
示例代码本文中很多效果都没有截图，可下载源代码运行项目源代码地址，或者通过视频教程查看视频教程地址
AspectRatio构造函数

const AspectRatio({ Key? key, required this.aspectRatio, Widget? child, }) : assert(aspectRatio != null), assert(aspectRatio > 0.0), // can't test isFinite because that's not a constant expression super(key: key, child: child);

AspectRatio属性和说明

字段	属性	描述
aspectRatio	double	纵横比例
child	Widget	子组件

aspectRatio、child
aspectRatio 主要用来设定子组件的纵横比例，而child就是需要被设定纵横比例的子组件。
AspectRatio基本使用

import 'package:flutter/material.dart'; class AspectRatioExample extends StatefulWidget { @override _AspectRatioExampleState createState() => _AspectRatioExampleState(); }class _AspectRatioExampleState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("AspectRatioExample"), ), body: Container( color: Colors.blue, alignment: Alignment.center, width: double.infinity, height: 100.0, child: AspectRatio( aspectRatio: 16 / 9, child: Container( color: Colors.orangeAccent, ), ), ), ); } }

AspectRatio效果展示我们看到橙色盒子的宽度是他父组件的高度*16/9

Flutter深入浅出组件篇---AspectRatio、FractionallySizedBox

文章图片

FractionallySizedBox介绍当我们需要一个控件的尺寸是相对尺寸时，比如当前按钮的宽度占父组件的70%，可以使用FractionallySizedBox来实现此效果。
FractionallySizedBox构造函数

const FractionallySizedBox({ Key? key, this.alignment = Alignment.center, this.widthFactor, this.heightFactor, Widget? child, }) : assert(alignment != null), assert(widthFactor == null || widthFactor >= 0.0), assert(heightFactor == null || heightFactor >= 0.0), super(key: key, child: child);

FractionallySizedBox属性和说明

字段	属性	描述
alignment	AlignmentGeometry	子组件的对齐方式
widthFactor	double	宽度系数
heightFactor	double	高度系数
child	Widget	子组件

1、alignment
关于alignment 这个字段在前面的文章中我们详细讲过，在Flutter深入浅出组件篇---Align、AnimatedAlign 可以看到更详细的介绍
2、widthFactor
子组件相对于父组件的宽度系数
3、heightFactor
子组件相对于父组件的高度系数
4、child
子组件
FractionallySizedBox基本使用

import 'package:flutter/material.dart'; class AspectRatioExample extends StatefulWidget { @override _AspectRatioExampleState createState() => _AspectRatioExampleState(); }class _AspectRatioExampleState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("AspectRatioExample"), ), body: Container( color: Colors.blue, alignment: Alignment.center, width: 150, height: 150.0, child: FractionallySizedBox( alignment: Alignment.topLeft, widthFactor: 1.5, heightFactor: 0.5, child: new Container( color: Colors.red, ), ), ), ); } }

FractionallySizedBox效果展示我们看到子组件红色盒子是父组件蓝色盒子的1.5倍，所以超出
【Flutter深入浅出组件篇---AspectRatio、FractionallySizedBox】