flutter布局

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

常用的單個(gè)子控件布局

Align

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

主要屬性：

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。也就是默認(rèn)屬性是this.alignment = Alignment.center,也就是這個(gè)控件總是在布局在的中間。

Padding

官方舉例

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

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

我的應(yīng)用：距離上下左右一定的距離

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("點(diǎn)擊我"),? ? ? ? ? ? onPressed: () {/*Navigator.push(

? ? ? ? ? ? ? ? ? context,

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

Container

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

這個(gè)控件可是設(shè)置pading和magin。 我的應(yīng)用：

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("點(diǎn)擊我"),onPressed: () {/*Navigator.push(

? ? ? ? ? ? ? ? ? context,

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

常用的多個(gè)子控件布局

Row

可以包裹多個(gè)控件，以行的形式排列

Column

可以包裹多個(gè)控件，以列的形式排列

Stack

包裹多個(gè)控件,后面的控件或者布局會(huì)覆蓋前面的。 我的應(yīng)用：

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

最后總結(jié)

當(dāng)然還有很多布局控件，也就舉例這幾個(gè)常用de吧。大家可以去官方網(wǎng)站查詢的。

附上官方地址：

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

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://www.juherenli.com/17604.html