Flutter螢幕適配元件

一、Expanded

Expaned常用於Row， Column， Flex的子元素中；在使用Expanded子Widget的時候，能夠填充滿剩餘空間。

const Expanded（{ Key key， int flex = 1， @required Widget child，}）

flex代表著當前Expanded的寬度（高度）佔比係數；

child代表著當前Expanded擁有的子Widget。

程式碼：

Container（ height： 200， margin： EdgeInsets。symmetric（horizontal： 10。0）， child： Row（ children：［ // 第一個區塊 Expanded（ child： Container（ decoration： BoxDecoration（ borderRadius： BorderRadius。all（Radius。circular（4。0））， color： Colors。amber。withOpacity（0。5）），），）， // 間隔 SizedBox（width： 10。0， height： 10。0）， // 第二個區塊 Expanded（ child： Column（ children：［ Expanded（ child： Container（ decoration： BoxDecoration（ borderRadius： BorderRadius。all（Radius。circular（4。0））， color： Colors。grey。withOpacity（0。5），），），）， SizedBox（width： 10。0， height： 10。0）， Expanded（ child： Row（ children：［ Expanded（ child： Container（ decoration： BoxDecoration（ borderRadius： BorderRadius。all（ Radius。circular（4。0），）， color： Colors。red。withOpacity（0。5），），），）， SizedBox（width： 10。0， height： 10。0）， Expanded（ child： Container（ decoration： BoxDecoration（ borderRadius： BorderRadius。all（ Radius。circular（4。0），）， color： Colors。blueAccent。withOpacity（0。5）），），），］，），）］，），），］，），）

效果：

二、Flexible

Flexible也是為小部件提供空間的，但是不會要求子空間填滿可用空間；

const Flexible（{ Key？ key， this。flex = 1， this。fit = FlexFit。loose， required Widget child， }）： super（key： key， child： child）；

Flexible元件可以使Row、Column、Flex等子元件在主軸方向有填充可用空間的能力（例如，Row在水平方向，Column在垂直方向），但是它與Expaned元件不同，它不強制子元件填充可用空間。

Flexible元件必須是Row、Column、Flex等元件的後裔，並且從Flexible到它封裝的Row、Column、Flex的路徑必須只包括StatelessWidgets或StatefulWidgets元件（不能是其他型別的元件，像RenderObjectWidgets）。

程式碼：

return Scaffold（ appBar： AppBar（ title： Text（“Flexible”），）， body： Column（ mainAxisSize： MainAxisSize。min， children：［ Flexible（ fit：FlexFit。tight， child： Container（ decoration： BoxDecoration（ borderRadius： BorderRadius。all（Radius。circular（4。0））， color： Colors。amber。withOpacity（0。5），），），）， Flexible（ fit：FlexFit。loose， flex： 2， child： Container（ height： 50， decoration： BoxDecoration（ borderRadius： BorderRadius。all（Radius。circular（4。0））， color： Colors。yellow。withOpacity（0。5），），），）， Flexible（ child： Container（ height： 100， decoration： BoxDecoration（ borderRadius： BorderRadius。all（Radius。circular（4。0））， color： Colors。cyan。withOpacity（0。5），），），）， Flexible（ fit：FlexFit。loose， child： Container（ height： 100， decoration： BoxDecoration（ borderRadius： BorderRadius。all（Radius。circular（4。0））， color： Colors。red。withOpacity（0。5），），），），］，），）；

效果：

如果在使用Flexible時，設定fit為FlexFit。tight，Flexible和Expanded就一模一樣了。

因此Expanded和Flexible的區別就是FlexFit。tight和FlexFit。loose的區別：

tight：必須（強制）填滿剩餘空間。

loose：儘可能大的填滿剩餘空間，但是可以不填滿。

三、Spacer

Spacer只是一個間距控制元件，可以用於調節小部件之間的間距，它有一個flex可以進行設定；

const Spacer（{Key？ key， this。flex = 1}）： assert（flex ！= null）， assert（flex > 0）， super（key： key）；

程式碼：

return Scaffold（ appBar： AppBar（ title： Text（“Spacer”），）， body： Center（ child： Column（ children：［ Container（ height： 50， decoration： BoxDecoration（ borderRadius： BorderRadius。all（Radius。circular（4。0））， color： Colors。amber。withOpacity（0。5），），）， Spacer（flex： 1）， Container（ height： 50， decoration： BoxDecoration（ borderRadius： BorderRadius。all（Radius。circular（4。0））， color： Colors。blueAccent。withOpacity（0。5），），），］，），），）；

效果：

三、AspectRatio

AspectRatio的作用是根據設定調整子元素 child 的寬高比。

const AspectRatio（{ Key？ key， required this。aspectRatio， Widget？ child， }）： assert（aspectRatio ！= null）， assert（aspectRatio > 0。0）， super（key： key， child： child）；

AspectRatio 首先會在佈局限制條件允許的範圍內儘可能的擴充套件，widget 的高度是由寬度和比率決定的，類似於 BoxFit 中的 contain，按照固定比率去儘量佔滿區域。

如果在滿足所有限制條件過後無法找到一個可行的尺寸，AspectRatio 最終將會去優先適應佈局限制條件，而忽略所設定的比率。

AspectRatio作用於父控制元件，根據aspectRatio計算父控制元件的寬或者高，AspectRatio的子控制元件將填充滿父控制元件，子控制元件的寬高無效。

強制子部件的寬度和高度具有給定的寬高比，可以父容器給定一個寬或者高，來換算另一個值

程式碼：

return Scaffold（ appBar： AppBar（ title： Text（“AspectRatio”），）， body： Center（ child： AspectRatio（ aspectRatio： 1， child： Container（ color： Colors。red，），）），）；

效果：

四、Wrap

Wrap可以進行水平方向或者垂直方向上的佈局，在一行或者一列現實不完所有的widgets的時候，能夠根據當前寬度或者高度自動換行。

Wrap（{ Key？ key， this。direction = Axis。horizontal， this。alignment = WrapAlignment。start， this。spacing = 0。0， this。runAlignment = WrapAlignment。start， this。runSpacing = 0。0， this。crossAxisAlignment = WrapCrossAlignment。start， this。textDirection， this。verticalDirection = VerticalDirection。down， this。clipBehavior = Clip。none， List children = const ［］， }）： assert（clipBehavior ！= null）， super（key： key， children： children）；

this.direction：

設定水平區域性還是垂直佈局，

this.alignment：

設定元素的其實位置，

this.spacing：

在direction： Axis。horizontal的時候指左右兩個Widget的間距，在direction： Axis。vertical的時候指上下兩個widget的間距，

this.runAlignment：

設定widget與widget在水平或者垂直軸上的間距，

1、WrapAlignment。start//每一行（列）子Widget在縱（橫）軸上的排列，全部子Widget從頂部開始展示

2、 WrapAlignment。end//每一行（列）子Widget在縱（橫）軸上的排列，全部子Widget挨著底部展示

3、 WrapAlignment。center//每一行（列）子Widget在縱（橫）軸上的排列，全部子widget在中間展示

4、WrapAlignment。spaceBetween//每一行（列）子Widget在縱（橫）軸上的排列，兩兩子widget之間間距相等，最上最下子widget挨著邊展示

5、 WrapAlignment。spaceAround//每一行（列）子Widget在縱（橫）軸上的排列，兩兩子widget之間間距相等，最上最下子widget離邊的距離為兩兩子widget之間距離的一半

6、WrapAlignment。spaceAround//每一行（列）子Widget在縱（橫）軸上的排列，兩兩子widget之間間距相等，最上最下子widget離邊的距離為兩兩子widget之間距離相等

this.runSpacing：

在direction： Axis。horizontal的時候指上下兩個Widget的間距，在direction： Axis。vertical的時候指左右兩個widget的間距，

this.crossAxisAlignment ：

1、WrapCrossAlignment。start：水平排列時控制全部子widgets的上部對齊，垂直排列時控制全部子widgets的左邊對齊，

2、WrapCrossAlignment。end：水平排列時控制全部子widgets的下部對齊，垂直排列時控制全部子widgets的又邊對齊，

3、WrapCrossAlignment。center//設定每一行的子Widgets劇中對齊，

this.textDirection：

設定每一行（列）的展示，

1、textDirection： TextDirection。ltr：設定每一行（列）的子Widgets從左到右（從上到下）正常顯示，正序排列，

2、textDirection： TextDirection。rtl：設定每一行（列）的子Widgets倒序顯示，

this.verticalDirection：

1、VerticalDirection。down，//設定行列widgets的展示，正常顯示，

2、VerticalDirection。up//倒序展示，比如，在direction： Axis。horizontal時有1、2、3行widgets，設定為up後，展示為3、2、1

this.clipBehavior：

內容裁剪選擇，這裡預設為hardEdge，有none，hardEdge，antiAlias，antiAliasWithSaveLayer四種裁剪行為，hardEdge為允許裁剪但不抗鋸齒，這個屬性預設就好在實際wrap使用中，當內容超過了wrap所能展示的範圍，及時設定為none也是會被裁剪的

程式碼：

class WrapPage extends StatelessWidget { @override Widget build（BuildContext context） { return Scaffold（ appBar： AppBar（ title： Text（“Warp”），）， body： Container（ child： Wrap（ runAlignment： WrapAlignment。spaceBetween， alignment： WrapAlignment。start， runSpacing： 1， children： tags。map（（e） => TagItem（e））。toList（））），）； }}class TagItem extends StatelessWidget { final String text； final a = Random（）； TagItem（this。text）； @override Widget build（BuildContext context） { return Container（ height： 40， margin： EdgeInsets。symmetric（vertical： 5， horizontal： 5）， decoration： BoxDecoration（ color： Colors。cyan， border： Border。all（color： Colors。blueAccent。withAlpha（60）， width： 1。0）， borderRadius： BorderRadius。all（Radius。circular（5）））， child： Container（ margin： EdgeInsets。all（8）， child： Text（text），），）； }}const List tags = ［ “12”， “3”， “ 111111”， “阿佛拍拍拍拍拍”， “sdzxc”， “zxc阿彈盡糧絕”， “hhhh”， “全球”， “qe434”， “2俄企鵝企鵝”， “‘c；vkz；’‘；zxcl’；‘”， “這種”， “asd9083049”， “11233”］；

效果：

轉自簡書：Ent_zhaolu

原文連結：https：//www。jianshu。com/p/454547e9fd31

別眨眼網

Flutter螢幕適配元件

相關推薦