温馨提示×

flutter系列之:按比例缩放的AspectRatio和FractionallySizedBox

小云
186
2023-09-21 10:25:05
栏目: 编程语言

AspectRatio和FractionallySizedBox是Flutter中用于按比例缩放子部件的两个常用小部件。

AspectRatio小部件是一个具有特定宽高比的小部件。它接受一个aspectRatio参数,该参数是一个double类型的值,表示宽度与高度的比例。AspectRatio会根据给定的比例自动调整子部件的大小。例如,如果设置了aspectRatio为2.0,那么子部件的宽度将是高度的两倍。AspectRatio小部件通常用于在布局中保持子部件的宽高比。

```dart
AspectRatio(
 aspectRatio: 16/9,
 child: Container(
   color: Colors.red,
 ),
)
```

FractionallySizedBox小部件是一个根据父部件的尺寸按比例调整子部件大小的小部件。它接受一个widthFactor和heightFactor参数,这两个参数都是double类型的值,分别表示子部件相对于父部件的宽度和高度比例。例如,如果设置了widthFactor为0.5,那么子部件的宽度将是父部件宽度的一半。FractionallySizedBox小部件通常用于在布局中调整子部件的大小,以便它们的宽度或高度相对于父部件的大小保持不变。

```dart
FractionallySizedBox(
 widthFactor: 0.5,
 child: Container(
   color: Colors.blue,
 ),
)
```

无论是AspectRatio还是FractionallySizedBox,都可以根据实际需求来使用。它们为我们提供了一种简单而方便的方法来按比例缩放子部件的大小。

0