Flutter 布局

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