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