FittedBox概述
FittedBox元件的作用是對child元件進行縮放和對齊方式的設定,其縮放的引數為fit
,有多種選擇的方式,而對齊方式alinment用法則和之前一致,即很多都是相通的。
FittedBox建構函式
const FittedBox({
Key key,
this.fit = BoxFit.contain,
this.alignment = Alignment.center,
Widget child,
})
複製程式碼
- fit 即
child
的縮放方式,比如以下縮放方式:fill
(通過扭曲源的縱橫比填充目標框。):
contain
(儘可能大,同時仍然將源完全包含在目標框中):
cover
(儘可能小,同時仍然覆蓋整個目標框):
fitWidth
(確保顯示了源的全部寬度,不管這是否意味著源垂直地溢位目標框):
fitHeight
(確保顯示源的完整高度,不管這是否意味著源水平地溢位目標框):
none
(將原始檔對齊到目標框內(預設情況下居中),並丟棄位於框外的原始檔的任何部分。
源映像沒有調整大小。):
scaleDown
(將原始檔對齊到目標框內(預設情況下,居中),如果需要,將原始檔向下縮放,以確保原始檔適合框內,這與contains相同,如果它會收縮影像,則它與none相同):
- alignment
child
對齊方式
簡單示例
// fittedBox
import 'package:flutter/material.dart';
class FittedBoxLearn extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text('FittedBox'),
),
body: Center(
child: Container(
width: 300,
height: 400,
decoration: BoxDecoration(
border: Border.all(),
),
// 根據內部child伸縮填充父容器
child: FittedBox(
// 填充方式 比如contain 儘可能大,同時仍然將源完全包含在目標框中。 還有cover、fill、fitWidth、fitHeight等方式
fit: BoxFit.contain,
// 對齊方式
alignment: Alignment(0, 0),
child: Container(
color: Colors.blueAccent,
width: 30,
height: 30,
)
),
),
));
}
}
複製程式碼