Flutter深入淺出元件篇---SizeBox、FittedBox

Jimi發表於2021-09-02
Flutter元件

SizeBox介紹

SizeBox 是一個指定尺寸的盒子，一般用來限制子控制元件的大小，能強制子控制元件具有特定寬度和高度。

示例程式碼

本文中很多效果都沒有截圖，可下載原始碼執行專案 原始碼地址，或者通過視訊教程檢視 視訊教程地址

什麼情況下使用SizeBox?

我們知道按鈕是不能設定寬度和高度的，如果我們需要自定按鈕的寬度和高度，那麼就可以用SizeBox 來進行限制。

SizeBox屬性和說明

欄位屬性描述
widthdouble盒子的寬度
heightdouble盒子的高度

SizeBox屬性詳細使用

1、width、height

width 指定盒子的寬度，height 指定盒子的高度

完整程式碼

import 'package:flutter/material.dart';

class SizeBoxExample extends StatefulWidget {
  @override
  _SizeBoxExampleState createState() => _SizeBoxExampleState();
}

class _SizeBoxExampleState extends State<SizeBoxExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("SizeBoxExample"),
      ),
      body: Container(
        child: SizedBox(
          width: 200.0,
          height: 300.0,
          child: Card(child: Text('Hello World!')),
        )
      ),
    );
  }
}

複製程式碼

SzieBox方法和說明

1、expand()

建立一個儘可能大的盒子

const SizedBox.expand({ Key? key, Widget? child })
  : width = double.infinity,
    height = double.infinity,
    super(key: key, child: child);
複製程式碼

2、shrink()

建立一個空的盒子

const SizedBox.shrink({ Key? key, Widget? child })
  : width = 0.0,
    height = 0.0,
    super(key: key, child: child);
複製程式碼

3、fromSize()

建立一個指定大小的盒子

SizedBox.fromSize({ Key? key, Widget? child, Size? size })
  : width = size?.width,
    height = size?.height,
    super(key: key, child: child);
複製程式碼

FittedBox介紹

當子元件的內容超出父元件大小時，FittedBox 元件的作用是對子元件進行縮放和對齊方式的設定。

FittedBox屬性和說明

欄位屬性描述
fitBoxFit子元件縮放位置調整
alignmentAlignmentGeometry子元件對齊方式
clipBehaviorClip剪輯子元件內容的方式

FittedBox屬性詳細使用

1、fit

主要用於調整子元件縮放位置，關於位置的調整總共有7種，分別為fill contain cover fitWidth fitHeight none scaleDown，接下來我們說一下這七個屬性分別代表什麼效果。

1.1、fill

不等比例縮放，圖片填充滿整個控制元件

1.2、contain

等比例縮放，直到圖片的高或者寬填充滿控制元件

1.3、cover

等比例縮放，直到圖片的寬和高都充滿整個控制元件，圖片可以超出控制元件的範圍，但是會導致顯示不完整。

1.4、fitWidth

等比例縮放，寬度充滿

1.5、fitHeight

等比例縮放，高度充滿

1.6、none

不等比例縮放，保留原始圖片大小並居中顯示

1.7、scaleDown

等比例縮放，兩種縮放方式，第一種當圖片大小大於控制元件時採用contain佈局，第二種當圖片寬高小於控制元件時採用none

2、alignment

alignment 主要是用於設定子元件的對齊方式，在Flutter深入淺出元件篇---Align、AnimatedAlign 可以看到更詳細的介紹

3、clipBehavior

剪輯子元件內容，關於裁剪內容總共有4種，分別為none hardEdge antiAlias antiAliasWithSaveLayer，該屬性主要配合貝塞爾曲線來使用，在後面的將繪圖的時候在重點來講，這裡先簡單概況一下4種屬性的作用。

3.1、none

無模式裁剪，正常效果

3.2、hardEdge

不使用抗鋸齒進行剪輯

3.3、antiAlias

使用抗鋸齒進行剪輯

3.4、antiAliasWithSaveLayer

使用抗鋸齒進行剪輯並在剪輯之後立即儲存圖層

總結

SizeBox 主要用於限制子控制元件的大小，比如需要設定按鈕的寬度和高度。

FittedBox 主要用於對子控制元件的縮放、對齊方式、剪輯操作。

相關文章