Flutter開發日記——Flutter佈局Widget詳解（上）

時間  2019-11-05
標籤 flutter 開發 日記 佈局 widget 詳解 简体版
原文   原文鏈接

Container

一、簡介css

  • Container相似於h5的盒子模型，至關於佈局容器
  • Container在沒有子節點的時候，會試圖變得足夠大
  • Container在帶有子節點的時候，會根據子節點的尺寸調節自身大小

二、構造函數bash

Container({
    Key key,
    this.alignment,
    this.padding,
    Color color,
    Decoration decoration,
    this.foregroundDecoration,
    double width,
    double height,
    BoxConstraints constraints,
    this.margin,
    this.transform,
    this.child,
})
複製代碼
  • alignment：控制child的對齊方式
  • padding：容器自己的內邊距
  • color：容器的背景色
  • decoration：容器的樣式，相似於css的style
  • foregroundDecoration：容器的前景色，可能會遮蓋color效果
  • width：容器的寬度
  • height：容器的高度
  • constraints：容器的約束，約束寬高的大小
  • margin：容器自己的外邊距
  • transform：容器的變換矩陣，可讓容器的縮放、旋轉、平移等
  • child：容器的子控件

三、例子ide

decoration能夠實現陰影和邊框的效果函數

Widget _buildColumn() {
    return Container(
      constraints: BoxConstraints.expand(
        height: 200,
      ),
      padding: EdgeInsets.all(8.0),
      child: Text("Hello World"),
      alignment: Alignment.center,
      transform: Matrix4.identity(),
      margin: EdgeInsets.all(16.0),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black, width: 2.0),
        color: Colors.blue[200],
        borderRadius: BorderRadius.circular(20.0)
      ),
      foregroundDecoration: BoxDecoration(),
      height: 200,
      width: 100,
      //color: Colors.blue[200],
    );
}
複製代碼

在這裏插入圖片描述

Padding

一、簡介佈局

  • Padding是比較功能單一的控件，負責子控件的內邊距

二、構造函數動畫

const Padding({
    Key key,
    @required this.padding,
    Widget child,
})
複製代碼
  • padding：控件的內邊距
  • child：子控件

三、例子ui

Widget _buildColumn() {
    return Padding(
      padding: EdgeInsets.all(8.0),
      child: Container(
        height: 200,
        width: 200,
        color: Colors.blue[200],
      ),
    );
}
複製代碼

在這裏插入圖片描述

Align

一、簡介this

  • Align能夠設置child的對齊方式，例如居中、居左、居右等，並根據child尺寸調節自身尺寸
  • 當widthFactor和heightFactor爲null的時候，child的尺寸會盡可能的擴展本身的尺寸，直至填充父控件

二、構造函數spa

const Align({
    Key key,
    this.alignment: Alignment.center,
    this.widthFactor,
    this.heightFactor,
    Widget child
})
複製代碼
  • alignment：child的對齊方式
  • widthFactor：寬度因子，若設置2.0的時候，Align的寬度將會是child的兩倍
  • heightFactor：高度因子，若設置2.0的時候，Align的高度將會是child的兩倍
  • child：子控件

三、例子.net

因爲設置了heightFactor和widthFactor，表示父控件的寬高最大應該是子控件的2.0倍。若是不設置heightFactor和widthFactor，則父控件則無限大，則子控件會在屏幕底部中點

Widget _buildColumn() {
    return Container(
      color: Colors.blue[200],
      child: Align(
        heightFactor: 2.0,
        widthFactor: 2.0,
        alignment: Alignment(0.0, 1.0), //底部中點對齊
        child: Text("Hello!"),
      ),
    );
}
複製代碼

在這裏插入圖片描述

Center

一、簡介

  • Center控件是將child居中的控件，居中的位置是父控件的中點位置
  • Center控件若設置了heightFactor和widthFactor，則父控件的尺寸會有所變化
  • Center控件徹底繼承自Align控件，只不過內部默認將alignment屬性設置爲居中

二、構造函數

class Center extends Align {
  const Center({ Key key, double widthFactor, double heightFactor, Widget child })
    : super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);
}
複製代碼

三、例子

因爲設置了heightFactor和widthFactor，表示父控件的寬高最大應該是子控件的1.5倍，因此父控件大小是300x300，則子控件就會在父控件的基礎上居中顯示。若是不設置heightFactor和widthFactor，則父控件則無限大，填充屏幕，則Center組件就在父控件的居中顯示，即屏幕中間

Widget _buildColumn() {
    return Container(
      color: Colors.blueGrey,
      child: Center(
        heightFactor: 1.5,
        widthFactor: 1.5,
        child: Container(
          height: 200,
          width: 200,
          color: Colors.blue[200],
        ),
      ),
    );
}
複製代碼

在這裏插入圖片描述

FittedBox

一、簡介

  • FittedBox會在本身的尺寸範圍內縮放而且調整child位置，使得child適合其尺寸
  • FittedBox相似於ImageView的ScaleType的屬性

二、構造函數

const FittedBox({
    Key key,
    this.fit: BoxFit.contain,
    this.alignment: Alignment.center,
    Widget child,
})
複製代碼
  • fit：child控件的填充模式
  • alignment：child的對齊方式
  • child：子控件

填充模式

  • BoxFit.none：默認不縮放，以子控件的寬和高做爲基準，若是父控件不夠承載，則按比例縮小子控件，圖片不會變形
  • BoxFit.fill：將子控件的寬和高，填充整個父控件，圖片會變形
  • BoxFit.contain：將子控件的寬和高，按比例填充父控件的寬和高，直到有一邊先填充完成爲止，圖片不會變形
  • BoxFit.cover：以子控件的寬和高做爲基準，放入父控件中，若是父控件不夠承載，則裁剪子控件多餘的部分，圖片不會變形，但會被裁剪
  • BoxFit.fitWidth：以子控件的寬做爲基準，放入父控件中，直到父控件的寬被擠滿，圖片不會變形，但會被裁剪
  • BoxFit.fitHeight：以子控件的高做爲基準，放入父控件中，直到父控件的高被擠滿，圖片不會變形，但會被裁剪
  • BoxFit.scaleDown：以父控件的寬和高做爲基準，子控件無條件縮放直到能夠塞進父控件

三、例子

經常使用的就是對圖片的裁剪，也能夠是對widget的裁剪，只要widget有固定的大小

Widget _buildColumn() {
    return Container(
      width: 300,
      height: 300,
      color: Colors.blue,
      child: FittedBox(
        fit: BoxFit.cover,
        alignment: Alignment.centerLeft,
        child: Image.asset("images/day27/girl.jpg"),
      ),
    );
}
複製代碼

在這裏插入圖片描述

AspectRatio

一、簡介

  • AspectRatio是調整child到設置的寬高比的組件
  • AspectRatio會根據未明確的寬或高按比例進行縮放

二、構造函數

const AspectRatio({
    Key key,
    @required this.aspectRatio,
    Widget child
}) 
複製代碼
  • aspectRatio：縮放比例，1.0爲初始比例
  • child：子控件

三、例子

因爲高度200是肯定的，寬度是不肯定的，而子控件的縮放比是1.5，最後子控件的大小寬爲300，高爲200

Widget _buildColumn() {
    return Container(
      height: 200.0,
      color: Colors.blue,
      child: AspectRatio(
        aspectRatio: 1.5,
        child: Container(
          color: Colors.red,
        ),
      ),
    );
}
複製代碼

在這裏插入圖片描述

ConstrainedBox

一、簡介

  • ConstrainedBox表示對子控件的約束條件，能夠約束子控件的大小

二、構造函數

ConstrainedBox({
    Key key,
    @required this.constraints,
    Widget child
})
複製代碼
  • constraints：子控件的約束條件
  • child：子控件

三、例子

約束子控件最小必須是100x100，最大必須是150x150

Widget _buildColumn() {
    return ConstrainedBox(
      constraints: BoxConstraints(
        minWidth: 100.0,
        minHeight: 100.0,
        maxWidth: 150.0,
        maxHeight: 150.0,
      ),
      child: Container(
        width: 200.0,
        height: 200.0,
        color: Colors.red,
      ),
    );
}
複製代碼

在這裏插入圖片描述

Baseline

一、簡介

  • Baseline控件同文字的baseline是同個意思的，處於文字的基準線
  • 若是child有baseline（好比Text控件），則根據child的baseline屬性，調整child的位置
  • 若是child沒有baseline（好比Container控件），則根據child的bottom，來調整child的位置

二、構造函數

const Baseline({
  Key key,
  @required this.baseline,
  @required this.baselineType,
  Widget child
})
複製代碼
  • baseline：baseline數值，自上而下
  • baselineType：baseline類型，alphabetic（對齊字符底部的水平線）和ideographic（對齊表意字符的水平線）
  • child：子控件

三、例子

因爲文字是具備baseline屬性的，經過例子看出沒有baseline屬性的話，只能根據child的bottom對齊，文字則會在baseline上

Widget _buildColumn() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Baseline(
          baselineType: TextBaseline.alphabetic,
          child: Text("Java",style: TextStyle(fontSize: 20.0),),
          baseline: 50.0,
        ),
        Baseline(
          //alphabetic：對齊字符底部的水平線
          //ideographic：對齊表意字符的水平線
          baselineType: TextBaseline.alphabetic,
          child: Container(
            width: 30,
            height: 30,
            color: Colors.blue[200],
          ),
          baseline: 50.0,
        ),
        Baseline(
          baselineType: TextBaseline.alphabetic,
          child: Text("iOS",style: TextStyle(fontSize: 30.0),),
          baseline: 50.0,
        ),
      ],
    );
}
複製代碼

在這裏插入圖片描述

FractionallySizedBox

一、簡介

  • FractionallySizedBox控件會根據現有空間，來調整child的尺寸
  • FractionallySizedBox控件中若child設置了具體的尺寸數值，也不起做用

二、構造函數

const FractionallySizedBox({
  Key key,
  this.alignment = Alignment.center,
  this.widthFactor,
  this.heightFactor,
  Widget child,
})
複製代碼
  • alignment：child的對齊方式
  • widthFactor：寬度因子，若設置0.5的時候，子控件的寬度將會是父控件的一半，若設置1.5的時候，子控件的寬度將會是父控件的1.5倍
  • heightFactor：高度因子，若設置0.5的時候，子控件的高度將會是父控件的一半，若設置1.5的時候，子控件的高度將會是父控件的1.5倍
  • child：子控件

三、例子

不須要指定子控件的大小，經過FractionallySizedBox約束子控件的大小爲父控件的一半

Widget _buildColumn() {
    return Container(
      color: Colors.blue[600],
      width: 200,
      height: 200,
      child: FractionallySizedBox(
        alignment: Alignment.center,
        widthFactor: 0.5,
        heightFactor: 0.5,
        child: Container(
          color: Colors.blue[200],
        ),
      ),
    );
}
複製代碼

在這裏插入圖片描述

IntrinsicHeight

一、簡介

  • IntrinsicHeight控件會調整child到固定的高度

二、構造函數

const IntrinsicHeight({ Key key, Widget child })
複製代碼
  • child：子控件

三、例子

在IntrinsicHeight子控件中放置四個相同寬度的容器，設置其中兩個容器的高度爲150和60，另外兩個不設置，IntrinsicHeight會找到最大的高度去限制其他容器

Widget _buildColumn() {
    return IntrinsicHeight(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Container(
            color: Colors.blue,
            width: 40.0,
            height: 150.0,
          ),
          Container(
            color: Colors.red,
            width: 40.0,
            height: 60.0,
          ),
          Container(color: Colors.yellow, width: 40.0),
          Container(color: Colors.yellow, width: 40.0),
        ],
      ),
    );
}
複製代碼

在這裏插入圖片描述

IntrinsicWidth

一、簡介

  • IntrinsicWidth控件會調整child到固定的寬度
  • IntrinsicWidth控件和IntrinsicHeight控件最大的區別在於IntrinsicWidth的寬高會受到限制

二、構造函數

const IntrinsicWidth({ Key key, this.stepWidth, this.stepHeight, Widget child })
複製代碼
  • stepWidth：若是爲null，child的寬度是child集合當中的最大寬度，child的最小寬度爲指定的stepWidth寬度，若是stepWidth寬度小於child的最小寬度，則該值不生效
  • stepHeight：若是爲null，child的高度是父控件的最大高度，不爲null，child的最大高度爲指定的stepHeight高度，若是stepHeight高度小於自己父容器的高度，則該值不生效
  • child：子控件

三、例子

設置stepHeight爲200，可是父控件的高度不止200，該值不生效。設置stepWidth爲150，可是其餘child的控件最大寬度不超過150，則最小的寬度爲150，即圖中的灰色背景

Widget _buildColumn() {
    return Container(
      color: Colors.grey,
      child: IntrinsicWidth(
        //父容器的大小
        stepHeight: 200,
        stepWidth: 150,
        child: Column(
          children: <Widget>[
            Container(
              color: Colors.blue,
              width: 100.0,
              height: 150.0,
            ),
            Container(
              color: Colors.red,
              width: 60.0,
              height: 150.0,
            ),
            Container(color: Colors.yellow, height: 150.0),
            Container(color: Colors.green, height: 150.0),
          ],
        ),
      ),
    );
}
複製代碼

在這裏插入圖片描述

LimitedBox

一、簡介

  • LimitedBox控件是對子控件最大寬高進行限制的控件
  • LimitedBox控件要使最大寬高限制起做用，是有必定條件的
  • 若是LimitedBox外部寬度沒有約束（好比Row，它是高度必定寬度不限制），child的寬受到LimitedBox最大寬度（maxWidth）屬性限制
  • 若是LimitedBox外部高度沒有約束（好比Column，它是寬度必定高度不限制），child的高受到LimitedBox最大高度（maxHeight）屬性限制

二、構造函數

const LimitedBox({
  Key key,
  this.maxWidth = double.infinity,
  this.maxHeight = double.infinity,
  Widget child,
})
複製代碼
  • maxWidth：限制子控件的最大寬度
  • maxHeight：限制子控件的最大高度
  • child：子控件

三、例子

因爲是Row組件，Row組件的高度是被肯定的，寬度是不限制的，因此高度限制不起做用，寬度限制起做用，最後寬度是150，高度是250

Widget _buildColumn() {
    return Row(
      children: <Widget>[
        LimitedBox(
          maxHeight: 150, //因爲是Row，高度被肯定，因此高度限制不起做用
          maxWidth: 150, //因爲是Row，寬度不限制，因此寬度限制起做用
          child: Container(
            width: 250,
            height: 250,
            color: Colors.redAccent,
          ),
        )
      ],
    );
}
複製代碼

在這裏插入圖片描述

Offstage

一、簡介

  • Offstage控件是經過參數來控制child是否顯示

二、構造函數

const Offstage({ Key key, this.offstage = true, Widget child })
複製代碼
  • offstage：當offstage爲true，當前控件不會被繪製在屏幕上，不會響應點擊事件，也不會佔用空間，反之相反
  • child：子控件

三、例子

Widget _buildColumn() {
    return Offstage(
      offstage: false,
      child: Container(
        width: 250,
        height: 250,
        color: Colors.redAccent,
      ),
    );
}
複製代碼

在這裏插入圖片描述

OverflowBox

一、簡介

  • OverflowBox控件會限制一個範圍區域，超出最大值部分會被裁剪，低於最小值會被填充

二、構造函數

const OverflowBox({
    Key key,
    this.alignment = Alignment.center,
    this.minWidth,
    this.maxWidth,
    this.minHeight,
    this.maxHeight,
    Widget child,
})
複製代碼
  • alignment：子控件的對齊方式
  • minWidth：限制子控件的最小寬度
  • maxWidth：限制子控件的最大寬度
  • minHeight：限制子控件的最小高度
  • maxHeight：限制子控件的最大高度
  • child：子控件

三、例子

子控件必須符合最小高度，因此最後出來的大小是300x600

Widget _buildColumn() {
    return OverflowBox(
      minHeight: 600,
      child: Container(
        width: 300,
        height: 300,
        color: Colors.blueAccent,
      ),
    );
}
複製代碼

在這裏插入圖片描述

SizedBox

一、簡介

  • SizedBox是設置具體尺寸的控件

二、構造函數

const SizedBox({ Key key, this.width, this.height, Widget child })
複製代碼
  • width：子控件的寬度，若設置了，會強制調整到此寬度，若未設置，則會根據子控件的自身的寬度進行調整
  • height：子控件的高度，若設置了，會強制調整到此高度，若未設置，則會根據子控件的自身的高度進行調整
  • child：子控件

三、例子

Widget _buildColumn() {
    return SizedBox(
      width: 200,
      height: 200,
      child: Container(
        color: Colors.blueAccent,
      ),
    );
}
複製代碼

在這裏插入圖片描述

SizedOverflowBox

一、簡介

  • SizedOverflowBox是SizedBox與OverflowBox的結合體
  • SizedOverflowBox具備SizedBox的固定尺寸，也有OverflowBox的裁剪功能

二、構造函數

const SizedOverflowBox({
  Key key,
  @required this.size,
  this.alignment = Alignment.center,
  Widget child,
})
複製代碼
  • size：子控件的尺寸
  • alignment：子控件的對齊方式
  • child：子控件

三、例子

控制child的尺寸大小爲100x100

Widget _buildColumn() {
    return SizedOverflowBox(
      size: Size(100, 100),
      alignment: Alignment.center,
      child: Container(
        width: 300,
        height: 300,
        color: Colors.blueAccent,
      ),
    );
}
複製代碼

在這裏插入圖片描述

Transform

一、簡介

  • Transform控件是控制child控件的矩陣變換的控件，經過變換矩陣，對控件作動畫

二、構造函數

const Transform({
  Key key,
  @required this.transform,
  this.origin,
  this.alignment,
  this.transformHitTests = true,
  Widget child,
})
複製代碼
  • transform：矩陣變換的結果
  • origin：子控件的偏移位置
  • alignment：子控件的對齊方式
  • transformHitTests：子控件的點擊區域是否也作相應的改變
  • child：子控件

三、例子

讓容器輕微的偏移上方，而後作居於自身的旋轉效果

Widget _buildColumn() {
    return Transform(
      origin: Offset(0.0, 10.0),
      transformHitTests: true,
      alignment: Alignment.center,
      transform: Matrix4.rotationZ(3.0),
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blueAccent,
      ),
    );
}
複製代碼

在這裏插入圖片描述

CustomSingleChildLayout

一、簡介

  • CustomSingleChildLayout控件是一個能夠自定義擁有單個子控件的佈局

二、構造函數

const CustomSingleChildLayout({
  Key key,
  @required this.delegate,
  Widget child
})
複製代碼
  • delegate：控制子控件的代理類
  • child：子控件

三、例子

須要先建立一個代理類，將傳遞進來的參數Size做爲預期尺寸，若是預期尺寸和當前子控件的尺寸不符合，則會從新讓子控件設置新的約束來適應預期Size的尺寸

class FixedSizeLayoutDelegate extends SingleChildLayoutDelegate {
  FixedSizeLayoutDelegate(this.size);
  // 預期尺寸
  final Size size;

  @override
  Size getSize(BoxConstraints constraints) => size;

  @override
  BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
    // 從新設置子控件的約束，讓他適應預期Size的尺寸
    return BoxConstraints.tight(size);
  }

  @override
  bool shouldRelayout(FixedSizeLayoutDelegate oldDelegate) {
    // 若是預期尺寸和當前子控件的尺寸不符合，則從新layout
    return size != oldDelegate.size;
  }
}
複製代碼

因爲預期的尺寸是300x300，當前尺寸和預期不匹配，因此會將子控件調整到預期的尺寸

Widget _buildColumn() {
    return CustomSingleChildLayout(
      delegate: FixedSizeLayoutDelegate(Size(300, 300)),
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blueAccent,
      ),
    );
}
複製代碼

在這裏插入圖片描述

做者


Hensen_
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程