1. 首頁 > 生活百科 > >

flutter系列之:深入理解布局的基礎constraints

生活百科

目錄

  • 簡介
  • Tight和loose constraints
  • 理解constraints的原則
  • 總結
簡介我們在flutter中使用layout的時候需要經常對組件進行一些大小的限制，這種限制就叫做constraints，用來控制layout中的組件大小 。
掌握了constraints才算對layout有了真正的了解，但是flutter中的constraints和我們熟悉的HTML中的constraints區別比較大，所以我們還是需要深入了解flutter中contraints的特性 。
Tight和loose constraints對于constraints來說，只有四個屬性，分別是最小width ， 最大width，最小height和最大height 。這四個屬性所能限制的就是寬度和高度的范圍 。
根據這兩個屬性的范圍不同，constraints可以分為tight constraints和loose constraints 。
那么tight和loose有什么區別呢？
對于tight來說，它的 maximum width = minimum width, 并且maximum height = minimum height, 也就是說為width和height提供了一個特定的值 。
具體而言，可以看下BoxConstraints的tight實現：
BoxConstraints.tight(Size size): minWidth = size.width,maxWidth = size.width,minHeight = size.height,maxHeight = size.height;和tight相對應的就是loose，在loose中我們設置了最大的width和height,但是希望widget越小越好，這樣對應width和height的最小值為0，同樣以BoxConstraints為例看下它的定義：
BoxConstraints.loose(Size size): minWidth = 0.0,maxWidth = size.width,minHeight = 0.0,maxHeight = size.height;理解constraints的原則前面我們講到了constraints的分類，這里我們會講一下constraints的基本原則 。
通常來說，在flutter中 ， 一個widget的constraints是從它的parent繼承而來的 。然后這個widget會將constraints告訴他的子widget.
子widget會有自己定義的大??，那么子widget會根據自己定義的大小來設置自己的大小，并將結果反饋跟父widget，父widget會最終根據所有子widget的大小來設置自己的大小 。
所以總結而言就是，constraints是向下傳遞的，而size是向上傳遞的 。
可能大家還不太明白是什么意思，沒關系 ， 接下來我們用具體的例子來說明 。
首先，我們使用BoxConstraints.tightFor來創建一個盡可能大的width和height的Constraints,然后在這個constraint內部新建widget來觀察他們的表現 。
ConstrainedBox(constraints: const BoxConstraints.tightFor(width: double.infinity, height: double.infinity),child: exampleWidget)通過替換上面的exampleWidget，我們來觀察不同的表現形式 。
首先是最基礎的Container ， 對于Container本身來說，他可以設置width和height,但是這兩個屬性并不是constraint，所以還得從parent widget中繼承 。
那么對于下面的一個widget來說：
Widget build(BuildContext context) {return Container(color: blue);}它會使用從parent繼承的constraints,也就是說盡可能的大，所以會展示下面的界面：
flutter系列之:深入理解布局的基礎constraints

文章插圖
填滿所有的區域 。
如果給Container指定了width和hight，同樣的，Container需要從parent繼承constraints,所以仍然是填滿整個區域：
Widget build(BuildContext context) {return Container(width: 100, height: 100, color: blue);}但是 ， 如果我們在Container的外面再加上一個constraints,比如Center：
Widget build(BuildContext context) {return Center(child: Container(width: 100, height: 100, color: blue),);}那么雖然Center會從parent繼承constraints，去填滿整個區域，但是Center本身的constraints是告訴子widget可以按照他自己的意愿來調整大小，所以這個時候最終Container的大小就是100x100:
flutter系列之:深入理解布局的基礎constraints

文章插圖
除了Center之外，我們還可以使用Align ， 效果和Center是一致的：
Widget build(BuildContext context) {return Align(alignment: Alignment.bottomLeft,child: Container(width: 100, height: 100, color: blue),);}
flutter系列之:深入理解布局的基礎constraints

文章插圖
下面是一個使用Center的很有趣的例子：
Widget build(BuildContext context) {return Center(child: Container(color: blue,child: Container(color: green, width: 30, height: 30),),);}這里Center中有一個Container ， Container中有一個Container ， 但是這兩個Container設置了不同的顏色 。
因為外層的Container并沒有設置大小，所以他的大小是由child Container來決定的，因為兩個Container大小一樣 ， 所以外部的顏色會被內部的覆蓋，我們可以得到下面的界面：

推薦閱讀