詳解flutter中常用的container layout實(shí)例

更新時(shí)間：2022年09月09日 16:35:56 作者：flydean

這篇文章主要為大家介紹了詳解flutter中常用的container layout實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

簡(jiǎn)介

在上一篇文章中，我們列舉了flutter中的所有l(wèi)ayout類，并且詳細(xì)介紹了兩個(gè)非常常用的layout:Row和Column。

掌握了上面兩個(gè)基本的layout還是不夠的，如果需要應(yīng)付日常的layout使用，我們還需要掌握多一些layout組件。今天我們會(huì)介紹一個(gè)功能強(qiáng)大的layout:Container layout。

Container的使用

Container是一個(gè)空白的容器，通?？梢杂肅ontainer來(lái)封裝其他的widget。那么為什么還需要把widget封裝在Container中呢？這是因?yàn)镃ontainer中包含了一些特殊的功能。

比如Container中可以設(shè)置背景顏色或者背景圖片，并且可以設(shè)置padding, margins和borders。這就為組件的自定義提供了諸多空間。

首先看一下Container的定義和構(gòu)造函數(shù)：

class Container extends StatelessWidget {
  Container({
    Key? key,
    this.alignment,
    this.padding,
    this.color,
    this.decoration,
    this.foregroundDecoration,
    double? width,
    double? height,
    BoxConstraints? constraints,
    this.margin,
    this.transform,
    this.transformAlignment,
    this.child,
    this.clipBehavior = Clip.none,
  })

可以看到Container是一個(gè)StatelessWidget，它的構(gòu)造函數(shù)可以傳入多個(gè)非常有用的屬性，用來(lái)控制Container的表現(xiàn)。

Container中有padding,decoration,constraints和margin這些和位置相關(guān)的一些屬性，他們有什么關(guān)系呢？

container首先將child用padding包裹起來(lái)，padding可以用decoration進(jìn)行填充。

填充后的padding又可以應(yīng)用constraints來(lái)進(jìn)行限制(比如width和height)，然后這個(gè)組件又可以使用margin空白包裹起來(lái)。

接下來(lái)我們看一個(gè)簡(jiǎn)單的Container中包含Column和Row的例子。

首先構(gòu)造一個(gè)container widget，它包含一個(gè)Column：

  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        color: Colors.white,
      ),
      child: Column(
        children: [
          buildBoxRow(),
          buildBoxRow(),
        ],
      ),
    );
  }

這里給Container設(shè)置了一個(gè)BoxDecoration，用于指定Container的背景顏色。

在Child中給定了一個(gè)Column widget，它的child是一個(gè)Row對(duì)象。

  Widget buildBoxRow()  => Row(
    textDirection: TextDirection.ltr,
    children: [
      Container(
        width: 100,
        child: Image.asset("images/head.jpg")
      )
    ],
  );

這里的Row中又是一個(gè)包含了Image的Container對(duì)象。

最后運(yùn)行，我們可以得到下面的界面：

Container中包含兩行，每行包含一個(gè)Image對(duì)象。

旋轉(zhuǎn)Container

默認(rèn)情況下Container是一個(gè)正常布局的widget，但是有時(shí)候我們可能需要實(shí)現(xiàn)一些特殊效果，比如說(shuō)組件的旋轉(zhuǎn)，Container提供的transform屬性可以很方便的做到這一點(diǎn)。

對(duì)于Container來(lái)說(shuō)，transform是在組件繪制中最先被應(yīng)用的，transform之后會(huì)進(jìn)行decoration的繪制，然后進(jìn)行child的繪制，最后進(jìn)行foregroundDecoration的繪制。

還是上面的例子，我們?cè)囈幌聇ransform屬性是如何工作的，我們?cè)诎琲mage的container中加入transform屬性：

  Widget buildBoxRow()  => Row(
    textDirection: TextDirection.ltr,
    children: [
      Container(
          transform: Matrix4.rotationZ(0.2),
        width: 100,
        child: Image.asset("images/head.jpg")
      )
    ],
  );

最后生成的APP如下：

可以看到圖片已經(jīng)沿Z軸進(jìn)行了旋轉(zhuǎn)。

這里的旋轉(zhuǎn)使用的是Matrix4.rotationZ,也就是沿Z軸選擇，當(dāng)然你可以可以使用rotationX或者rotationY，分別沿X軸或者Y軸旋轉(zhuǎn)。

如果選擇rotationX,那么看起來(lái)的圖像應(yīng)該是這樣的：

事實(shí)上，Matrix4不僅僅可以沿單獨(dú)的軸進(jìn)行旋轉(zhuǎn)，還可以選擇特定的向量方向進(jìn)行選擇。

比如下面的兩個(gè)方法：

  /// Translation matrix.
  factory Matrix4.translation(Vector3 translation) => Matrix4.zero()
    ..setIdentity()
    ..setTranslation(translation);
  /// Translation matrix.
  factory Matrix4.translationValues(double x, double y, double z) =>
      Matrix4.zero()
        ..setIdentity()
        ..setTranslationRaw(x, y, z);

Matrix4還可以沿三個(gè)方向進(jìn)行進(jìn)行放大縮寫，如下面的方法：

  /// Scale matrix.
  factory Matrix4.diagonal3Values(double x, double y, double z) =>
      Matrix4.zero()
        .._m4storage[15] = 1.0
        .._m4storage[10] = z
        .._m4storage[5] = y
        .._m4storage[0] = x;

感興趣的朋友可以自行嘗試。

Container中的BoxConstraints

在Container中設(shè)置Constraints的時(shí)候，我們使用的是BoxConstraints。BoxConstraints有四個(gè)包含數(shù)字的屬性，分別是minWidth,maxWidth,minHeight和maxHeight。

所以BoxConstraints提供了這四個(gè)值的構(gòu)造函數(shù)：

  const BoxConstraints({
    this.minWidth = 0.0,
    this.maxWidth = double.infinity,
    this.minHeight = 0.0,
    this.maxHeight = double.infinity,
  }) : assert(minWidth != null),
       assert(maxWidth != null),
       assert(minHeight != null),
       assert(maxHeight != null);

BoxConstraints還有兩個(gè)構(gòu)造函數(shù)分別是loose和tight：

BoxConstraints.loose(Size size) 
BoxConstraints.tight(Size size)

這兩個(gè)有什么區(qū)別呢？如果一個(gè)axis的最小值是0的話，那么這個(gè)BoxConstraints就是loose。

如果一個(gè)axis的最大值和最小值是相等的情況，那么這個(gè)BoxConstraints就是tight。

BoxConstraints中還有一個(gè)非常常用的方法如下：

 BoxConstraints.expand({double? width, double? height})

expand的意思就是最大值和最小值都是infinity的，具體的定義可以從方法的實(shí)現(xiàn)中看出：

  const BoxConstraints.expand({
    double? width,
    double? height,
  }) : minWidth = width ?? double.infinity,
       maxWidth = width ?? double.infinity,
       minHeight = height ?? double.infinity,
       maxHeight = height ?? double.infinity;