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<AspectRatioExample> {
@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
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<AspectRatioExample> {
@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 倍,所以超出