国产精品自在在线午夜出白浆,亚洲av调教捆绑一区二区麻豆

簡(jiǎn)介
Tight和loose constraints
理解constraints的原則
總結(jié)

簡(jiǎn)介我們?cè)趂lutter中使用layout的時(shí)候需要經(jīng)常對(duì)組件進(jìn)行一些大小的限制，這種限制就叫做constraints，用來(lái)控制layout中的組件大小。
掌握了constraints才算對(duì)layout有了真正的了解，但是flutter中的constraints和我們熟悉的HTML中的constraints區(qū)別比較大，所以我們還是需要深入了解flutter中contraints的特性。
Tight和loose constraints對(duì)于constraints來(lái)說(shuō)，只有四個(gè)屬性，分別是最小width，最大width，最小height和最大height 。這四個(gè)屬性所能限制的就是寬度和高度的范圍。
根據(jù)這兩個(gè)屬性的范圍不同，constraints可以分為tight constraints和loose constraints 。
那么tight和loose有什么區(qū)別呢？
對(duì)于tight來(lái)說(shuō)，它的 maximum width = minimum width, 并且maximum height = minimum height, 也就是說(shuō)為width和height提供了一個(gè)特定的值。
具體而言，可以看下BoxConstraints的tight實(shí)現(xiàn)：

BoxConstraints.tight(Size size): minWidth = size.width,maxWidth = size.width,minHeight = size.height,maxHeight = size.height;

和tight相對(duì)應(yīng)的就是loose，在loose中我們?cè)O(shè)置了最大的width和height,但是希望widget越小越好，這樣對(duì)應(yīng)width和height的最小值為0，同樣以BoxConstraints為例看下它的定義：
BoxConstraints.loose(Size size): minWidth = 0.0,maxWidth = size.width,minHeight = 0.0,maxHeight = size.height;理解constraints的原則前面我們講到了constraints的分類(lèi)，這里我們會(huì)講一下constraints的基本原則。
通常來(lái)說(shuō)，在flutter中，一個(gè)widget的constraints是從它的parent繼承而來(lái)的。然后這個(gè)widget會(huì)將constraints告訴他的子widget.
子widget會(huì)有自己定義的大小，那么子widget會(huì)根據(jù)自己定義的大小來(lái)設(shè)置自己的大小，并將結(jié)果反饋跟父widget，父widget會(huì)最終根據(jù)所有子widget的大小來(lái)設(shè)置自己的大小。
所以總結(jié)而言就是，constraints是向下傳遞的，而size是向上傳遞的。
可能大家還不太明白是什么意思，沒(méi)關(guān)系，接下來(lái)我們用具體的例子來(lái)說(shuō)明。
首先，我們使用BoxConstraints.tightFor來(lái)創(chuàng)建一個(gè)盡可能大的width和height的Constraints,然后在這個(gè)constraint內(nèi)部新建widget來(lái)觀察他們的表現(xiàn) 。

ConstrainedBox(constraints: const BoxConstraints.tightFor(width: double.infinity, height: double.infinity),child: exampleWidget)

通過(guò)替換上面的exampleWidget，我們來(lái)觀察不同的表現(xiàn)形式。
首先是最基礎(chǔ)的Container，對(duì)于Container本身來(lái)說(shuō)，他可以設(shè)置width和height,但是這兩個(gè)屬性并不是constraint，所以還得從parent widget中繼承。
那么對(duì)于下面的一個(gè)widget來(lái)說(shuō)：
Widget build(BuildContext context) {return Container(color: blue);}它會(huì)使用從parent繼承的constraints,也就是說(shuō)盡可能的大，所以會(huì)展示下面的界面：

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