今兒個主要學習一下幾個基本組件
Padding Row Column Expended 四個組件

Padding 組件用法

Flutter提供的組件是沒有padding屬性的拍棕，所以在處理內邊距的時候，就需要用到Padding組件來設置容器和子元素之間的間距 缚柏，貼代碼

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
      child: GridView.count(
        crossAxisCount: 2,
        childAspectRatio: 1.7,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network('https://www.itying.com/images/flutter/1.png',
                fit: BoxFit.cover),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network('https://www.itying.com/images/flutter/2.png',
                fit: BoxFit.cover),
          )
        ],
    ));
  }
}

fit的幾個屬性
BoxFit.fill:充滿父容器。 可能會拉伸變形
BoxFit.contain:盡可能大船侧，保持圖片分辨率饱狂。不變形，填不滿
BoxFit.cover:充滿容器竟块，不變形可能會被截斷因宇。
BoxFit.none:圖片居中顯示七婴，不改變分大小，可能會被截斷察滑。
BoxFit.fitWidth:圖片填滿寬度，高度可能會被截斷
BoxFit.fitHeight:圖片填滿高度修肠，寬度可能會被截斷
BoxFit.scaleDown:圖片可以完整顯示贺辰，但是可能不能填充滿。

Row組件橫向

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text('FlutterDemo')),
      body: LayoutDemo(),
    ));
  }
}
class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 800.0,
      width: 400.0,
      color: Colors.pink,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,    
        crossAxisAlignment: CrossAxisAlignment.start,     //用的比較少
        children: <Widget>[
          IconContainer(Icons.search,color: Colors.blue),
          IconContainer(Icons.home,color: Colors.orange),
          IconContainer(Icons.select_all,color: Colors.red),
        ],
      ),
    );
  }
}
class IconContainer extends StatelessWidget{
  double size=32.0;
  Color color=Colors.red;
  IconData icon;
  IconContainer(this.icon,{this.color,this.size});
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      height: 100.0,
      width: 100.0,
      color: this.color,
      child: Center(
        child: Icon(this.icon,size: this.size,color: Colors.white)
      ),
    );
  }
}

MainAxisAlignment.start表示居于Container容器X軸開始位置也就是左側
CrossAxisAlignment.start表示居于Container容器Y軸最上邊
MainAxisAlignment.spaceEvenly表示控件均勻鋪開

Column水平布局跟ROW用法一樣

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 800.0,
      width: 400.0,
      color: Colors.pink,
      child: Column(    
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.end,   
        children: <Widget>[
          IconContainer(Icons.search,color: Colors.blue),
          IconContainer(Icons.home,color: Colors.orange),
          IconContainer(Icons.select_all,color: Colors.red),
        ],
      ),
    );
  }
}

Flutter Expanded 類似 Web 中的 Flex 布局（權重的方式布局）

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            Expanded(
              child:   Container(
                height: 180,
                color: Colors.black,
                child: Text('你好Flutter'),
              ),
            )
          ],
        ),
        SizedBox(height: 10),
        Row(
          children: <Widget>[
            Expanded(
              flex: 2,
              child: Container(
                height: 180,
                child: Image.network("https://www.itying.com/images/flutter/2.png",fit: BoxFit.cover),
              )
            ),
            SizedBox(width: 10),
            Expanded(
              flex: 1,
              child: Container(
                height: 180,
                child: ListView(
                  children: <Widget>[
                    Container(
                      height: 85,
                      child: Image.network("https://www.itying.com/images/flutter/3.png",fit: BoxFit.cover),
                    ),
                    SizedBox(height: 10),
                    Container(
                      height: 85,
                      child: Image.network("https://www.itying.com/images/flutter/4.png",fit: BoxFit.cover),
                    )
                  ],
                )
              )
            ),
          ],
        )
      ],
    );
  }
}

flex表示權重比例，同android 中的 weight饲化。
內容比較簡單莽鸭，看代碼 ，就不多說了吃靠。