flutter布局
flutter部分分两种,一种是单个子控件的布局一种是多个子控件的布局
常用的单个子控件布局
- Align
里面可以包含一个子控件,这个布局可以控制子控件距离上下左右的距离。
主要属性:
const Align({
Key key,
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。设置子控件距离布局上下左右的距离。
我的应用:距离上下左右一定的距离
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
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。
我的应用:
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
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
包裹多个控件,后面的控件或者布局会覆盖前面的。
我的应用:
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
appBar: AppBar(
title: Text("Stone"),
),
body: Stack(
// 设置开始覆盖的位置,还有其他属性
alignment: Alignment.center,
children: <Widget>[
FlatButton(
child: Text("小菜鸟"),
onPressed: null,
),
//将覆盖上一个控件
Text("我是小菜鸟"),
],
),
);
}
最后总结
当然还有很多布局控件,也就举例这几个常用de吧。大家可以去官方网站查询的。
附上官方地址:
https://flutter.io/docs/development/ui/widgets/layout#Multi-child layout widgets