Flutter学习之：Android 对比 Flutter

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: [
          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