flutter布局

flutter部分分兩種，一種是單個子控件的布局一種是多個子控件的布局

常用的單個子控件布局

Align

里面可以包含一個子控件，這個布局可以控制子控件距離上下左右的距離。

主要屬性：

constAlign({? ? Keykey,this.alignment = Alignment.center,this.widthFactor,this.heightFactor,? ? Widget child? }) :assert(alignment !=null),assert(widthFactor ==null|| widthFactor >=0.0),assert(heightFactor ==null|| heightFactor >=0.0),super(key:key, child: child);

Center

它繼承于Align。也就是默認屬性是this.alignment = Alignment.center,也就是這個控件總是在布局在的中間。

Padding

官方舉例

Padding(padding: EdgeInsets.all(8.0),? child: const Card(child: Text('Hello World!')),)

主要使用屬性：padding。設置子控件距離布局上下左右的距離。

我的應用：距離上下左右一定的距離

classFirstScreenextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext) {returnScaffold(? ? ? appBar:AppBar(? ? ? ? title:Text("Stone"),? ? ? ),? ? ? body:Padding(? ? ? ? padding:EdgeInsets.only(? ? ? ? ? left:10.0,// top:20.0,? ? ? ? ? right:50.0,? ? ? ? ? bottom:10.0,? ? ? ? ),? ? ? ? child:RaisedButton(? ? ? ? ? ? child:Text("點擊我"),? ? ? ? ? ? onPressed: () {/*Navigator.push(

? ? ? ? ? ? ? ? ? context,

? ? ? ? ? ? ? ? ? MaterialPageRoute(builder: (context) => SecondScreen()));*///_navigateAndDisplaySelection(context);_neverSatisfied("石頭",context: context);? ? ? ? ? ? }? ? ? ? )? ? ),? ? );? }

Container

官方文檔位置：https://docs.flutter.io/flutter/widgets/Container-class.html

這個控件可是設置pading和magin。 我的應用：

classFirstScreenextendsStatelessWidget{@overrideWidget build(BuildContext context) {returnScaffold(backgroundColor: Colors.blue,appBar: AppBar(title: Text("Stone"),? ? ? ),body: Container(color: Colors.red,margin: EdgeInsets.only(left:10.0,top:30.0,right:50.0,bottom:12.0),padding: EdgeInsets.only(left:10.0),child: RaisedButton(child: Text("點擊我"),onPressed: () {/*Navigator.push(

? ? ? ? ? ? ? ? ? context,

? ? ? ? ? ? ? ? ? MaterialPageRoute(builder: (context) => SecondScreen()));*///_navigateAndDisplaySelection(context);_neverSatisfied("石頭",context: context);? ? ? ? ? ? }? ? ? ? )? ? ),? ? );? }

常用的多個子控件布局

Row

可以包裹多個控件，以行的形式排列

Column

可以包裹多個控件，以列的形式排列

Stack

包裹多個控件,后面的控件或者布局會覆蓋前面的。 我的應用：

classFirstScreenextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext) {returnScaffold(? ? ? backgroundColor:Colors.blue,? ? ? appBar:AppBar(? ? ? ? title:Text("Stone"),? ? ? ),? ? ? body:Stack(//設置開始覆蓋的位置,還有其他屬性alignment:Alignment.center,? ? ? ? children: [FlatButton(? ? ? ? ? ? child:Text("小菜鳥"),? ? ? ? ? ? onPressed:null,? ? ? ? ? ),//將覆蓋上一個控件Text("我是小菜鳥"),? ? ? ? ],? ? ),? ? );? }

最后總結

當然還有很多布局控件，也就舉例這幾個常用de吧。大家可以去官方網站查詢的。

附上官方地址：

https://flutter.io/docs/development/ui/widgets/layout#Multi-child layout widgets

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.kwpm.com.cn/17604.html