Flutter 基礎佈局Widgets之FittedBox詳解

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,
              )
              
            ),
          ),
        ));
  }
}

複製程式碼

示例效果