Layouts布局篇
一、容器类
-
Android在Flutter中的替代
1、LinearLayout =》可以使用Row或Column来实现相同的结果
- 布局权重 weight
我们将每个子 view 包装到一个 Expanded 小部件中，该小部件的 flex 属性等同于我们的 android:layout_weight
2、RelativeLayout =》可以通过使用Column、Row和Stack的组合来实现RelativeLayout的效果。您可以为widget构造函数指定相对于父组件的布局规则（一个在Flutter中构建RelativeLayout的好例子，请参考在StackOverflow上 https://stackoverflow.com/questions/44396075/equivalent-of-relativelayout-in -flutter
）
3、ScrollView =》ListView
4、ListView =》 ListView
5、wrap_content 和 match_parent
wrap_content => mainAxisSize: MainAxisSize.min
match_parent => mainAxisSize: MainAxisSize.max(默认)
-
flutter中的容器
1、Container
Container 是最常用的容器类widget，下面是Container的定义：
Container({
this.alignment,
this.padding, //容器内补白，属于decoration的装饰范围
Color color, // 背景色
Decoration decoration, // 背景装饰
Decoration foregroundDecoration, //前景装饰
double width,//容器的宽度
double height, //容器的高度
BoxConstraints constraints, //容器大小的限制条件
this.margin,//容器外补白，不属于decoration的装饰范围
this.transform, //变换
this.child,
})
二、widget位置篇
1、设置边距 padding
new Padding(
padding: new EdgeInsets.all(8.0),
child: const Card(child: const Text('Hello World!')),
)
例子中对Card设置了一个宽度为8的内边距。
2、Align
Align的布局行为分为两种情况：
- 当widthFactor和heightFactor为null的时候，当其有限制条件的时候，Align会根据限制条件尽量的扩展自己的尺寸，当没有限制条件的时候，会调整到child的尺寸；
- 当widthFactor或者heightFactor不为null的时候，Aligin会根据factor属性，扩展自己的尺寸，例如设置widthFactor为2.0的时候，那么，Align的宽度将会是child的两倍。
Align为什么会有这样的布局行为呢？原因很简单，设置对齐方式的话，如果外层元素尺寸不确定的话，内部的对齐就无法确定。因此，会有宽高因子、根据外层限制扩大到最大尺寸、外层不确定时调整到child尺寸这些行为。
new Align(
alignment: Alignment.center,
widthFactor: 2.0,
heightFactor: 2.0,
child: new Text("Align"),
)
例子依旧很简单，设置一个宽高为child两倍区域的Align，其child处在正中间。
当你想让Widget显示在父布局的中间位置则需要设置 mainAxisSize: MainAxisSize.min
因为默认子Widget的高度是撑满父布局的高，此时用Center和Align都可以实现居中位置啦
new Container(
height: 113,
alignment: Alignment.center,
child: Column(
children: <Widget>[
new Image(
image: new AssetImage('images/g_7_image_icon.png')
),
new Text('Hello word')
],
mainAxisSize: MainAxisSize.min,
),
color: Colors.blue,
);
三、事件监听
1、如果Widget支持事件监听，则可以将一个函数传递给它并进行处理。例如，RaisedButton有一个onPressed参数
@override
Widget build(BuildContext context) {
return new RaisedButton(
onPressed: () {
print("click");
},
child: new Text("Button"));
}
2、如果Widget不支持事件监听，则可以将该Widget包装到GestureDetector中，并将处理函数传递给onTap参数
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
child: new GestureDetector(
child: new FlutterLogo(
size: 200.0,
),
onTap: () {
print("tap");
},
),
));
}
手势检测和触摸事件处理
在Flutter中，添加触摸监听器有两种方法:
1、如果Widget支持事件监听，则可以将一个函数传递给它并进行处理。例如，RaisedButton有一个onPressed参数
2、如果Widget不支持事件监听，则可以将该Widget包装到GestureDetector中，并将处理函数传递给onTap参数
使用GestureDetector，可以监听多种手势，例如:
Tap点击
onTapDown
onTapUp
onTap
onTapCancel
onDoubleTap 用户快速连续两次在同一位置轻敲屏幕.
长按
onLongPress
垂直拖动
onVerticalDragStart
onVerticalDragUpdate
onVerticalDragEnd
水平拖拽
onHorizontalDragStart
onHorizontalDragUpdate
onHorizontalDragEnd
