flutter 布局

flutter采用和RN类似的盒子模型布局方式
其中最重要的有三种
1.Row

   Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.baseline,
      textBaseline: TextBaseline.ideographic,
      //alphabetic  英文字符
      //ideographic 中文字符
      children: <Widget>[
        Expanded(
          child: Container(
            height: 80,
            color: Colors.white,
            child: Text(
              'hello',
              style: TextStyle(fontSize: 15),
            ),
          ),
        ),
        Expanded(
          child: Container(
            height: 80,
            color: Colors.blue,
            child: Text(
              '嘿嘿12312312',
              style: TextStyle(fontSize: 30),
            ),
          ),
        ),
        Expanded(
          child: Container(
            height: 80,
            color: Colors.red,
            child: Text(
              'heihei',
              style: TextStyle(fontSize: 60),
            ),
          ),
        ),
      ],
    );

2.Column
与Row类似
3.Stack

Stack(
      alignment: Alignment(0.0, 0.0),
      children: <Widget>[
        Positioned(
          child: Container(
            color: Colors.white,
            width: 400,
            height: 200,
            child: Icon(Icons.add),
          ),
        ),
        Positioned(
            child: Container(
          color: Colors.red,
          width: 250,
          height: 250,
          child: Icon(Icons.search),
        )),
        Positioned(
          right: 0,
          top: 0,
          child: Container(
            color: Colors.blue,
            width: 50,
            height: 50,
            child: Icon(Icons.search),
          ),
        ),
      ],
    );