1. 首頁 > 生活百科 > >

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

生活百科


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

文章插圖
如果我們給外層的添加一個padding如下：
Widget build(BuildContext context) {return Center(child: Container(padding: const EdgeInsets.all(20.0),color: blue,child: Container(color: green, width: 30, height: 30),),);}那么外層現在就比內層的widget要大了，顏色也可以展示出來了：
flutter系列之:深入理解布局的基礎constraints

文章插圖
我們再來看下面的例子：
Widget build(BuildContext context) {return ConstrainedBox(constraints: const BoxConstraints(minWidth: 70,minHeight: 70,maxWidth: 150,maxHeight: 150,),child: Container(color: blue, width: 10, height: 10),);}上面的例子在Container外面添加了一個ConstrainedBox，指定了四個constraints屬性，但是這個ConstrainedBox并不會應用到child上，所以最終得到的界面還是全部的藍色 。
為什么呢？這是因為不同的widget對constraints有不同的定義 ， 對于ConstrainedBox來說，他是一個對其子項施加額外約束的小部件 。記?。?這里是額外的約束 。因為對于它的parent來說，約束已經制定好了，所以ConstrainedBox會被忽略 。
我們再看下下面的代碼：
Widget build(BuildContext context) {return Center(child: ConstrainedBox(constraints: const BoxConstraints(minWidth: 70,minHeight: 70,maxWidth: 150,maxHeight: 150,),child: Container(color: blue, width: 10, height: 10),),);}這里因為使用了Center，Center會讓child來自行決定他們的大小 ， 所以這里的ConstrainedBox是生效的，如下：
flutter系列之:深入理解布局的基礎constraints

文章插圖
flutter中除了ConstrainedBox，還有一個UnconstrainedBox,它的作用和ConstrainedBox是相反的，大家可以自行嘗試 。
總結從上面的具體例子，我們可以看出，雖然我們有通用的Constraint規則，但是具體的表現還是要看不同的widget來定 。
所以大家在使用widget的時候 ， 一定要去讀一下widget的代碼，從而加深對widget的掌握 。
本文的例子：https://github.com/ddean2009/learn-flutter.git
更多內容請參考 http://www.flydean.com/13-flutter-ui-constraints/
最通俗的解讀，最深刻的干貨，最簡潔的教程，眾多你不知道的小技巧等你來發現！
歡迎關注我的公眾號:「程序那些事」,懂技術，更懂你！
【flutter系列之:深入理解布局的基礎constraints】

推薦閱讀