flutter學習--佈局組件

常用的佈局組件包括AppBar、Center、Container、SizeBox、線性佈局(Column、Row)、Flex(彈性佈局)、Stack(層疊佈局)等。

一、AppBar

相當於android中的標題欄
（1）源碼屬性：

（2）使用：

class AppBarWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("AppBarWidget"),//標題
        centerTitle: true,//標題居中顯示
        actions: <Widget>[//右邊顯示的內容，比如設置、更多等
          Image.asset(
            "assets/images/ic_launcher.png",
            width: 30,
            height: 30,
          ),
          Container(
            color: Colors.green,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  '設置',
                  textAlign: TextAlign.center,
                ),
              ],
            ),
            margin: EdgeInsets.only(left: 10, right: 10),
          ),
          Container(
            color: Colors.brown,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  '更多',
                  textAlign: TextAlign.center,
                ),
              ],
            ),
          ),
        ],
        leading: Container(  //左邊顯示的內容，比如一張圖片
          color: Colors.red,
          child: Image.asset("assets/images/ic_launcher.png"),
          padding: EdgeInsets.all(10),
        ),
        backgroundColor: Colors.yellow,//背景顏色
      ),
    );
  }
}

（3）效果：

二、Center

（1）源碼屬性：

繼承了Align。Align的源碼如下：

默認是居中的。

• widthFactor ：寬度因子
• heightFactor：高度因子
  這兩個參數控制上下左右子控件之間的間距。

（2）使用

class CenterWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('CenterWidget'),
      ),
      body: Row(
        children: <Widget>[
          Center(
            widthFactor: 2,//寬度因子
            heightFactor: 2,//高度因子
            child: Container(
              color: Colors.red,
              height: 150,
              width: 150,
              child: Center(
                child:Text('CenterWidget'),
              ),
              alignment: Alignment.center,
            ),
          ),
          Container(
            color: Colors.yellow,
            width: 50,
            height: 50,
          )
        ],
      )
    );
  }
}

（3）效果：

代碼中並沒有設置margin或者padding。因爲widthFactor和heightFactor出現了間距。

三、Container

（1）源碼屬性：

注意：color與decoration不能同時存在。

（2）使用:

class ContainerWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('ContainerWidget'),
      ),
      body: Container(
        width: 100, //寬度
        height: 100,//高度
        alignment: Alignment.center,
        padding: EdgeInsets.all(10),//內邊距
        margin: EdgeInsets.all(10),//外邊距
        transform: Matrix4.rotationZ(0.1),//z軸旋轉角度
        decoration: BoxDecoration(//加一個圓角邊框
          color: Colors.black,
          border: Border.all(width: 1,color: Colors.black),
          borderRadius: BorderRadius.all(Radius.circular(10))
        ),
        child: Container(//內部控件
          color: Colors.green,
        ),
      ),
    );
  }
}

（3）效果:

四、SizeBox

單一子控件佈局容器
（1）源碼屬性：

（2）使用:

class SizeBoxWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('SizeBoxWidget'),
      ),
      body: SizedBox(
        width: 50,
        height: 50,
        child: Container(
          color: Colors.red,
        ),
      ),
    );
  }
}

使用相當簡單。

（3）效果:

五、線性佈局–Column與Row

（1）源碼屬性：

（2）使用:

class ColumnWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('ColumnWidget'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,//主軸，對於column就是縱向頂部開始
        crossAxisAlignment: CrossAxisAlignment.center,//垂直軸，這裏是橫向居中
        mainAxisSize: MainAxisSize.max,//縱向佔滿整個屏幕空間。也可以使用 MainAxisSize.min控件有多大，佔用多大
        children: <Widget>[//子控件，縱向排列
          Row(
            mainAxisAlignment: MainAxisAlignment.center,//主軸，橫向居中
            children: <Widget>[ //子控件，橫向排列
              Container(
                width: 100,
                height: 100,
                color: Colors.red,
              ),
              Container(
                width: 100,
                height: 100,
                color: Colors.yellow,
              ),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                width: 50,
                height: 50,
                color: Colors.green,
              ),
            ],
          ),
        ],
      ),
    );
  }
}

（3）效果:

六、彈性佈局–Flex

相當於Android中的LinearLayout。需要配合 Expanded 使用。
（1）源碼屬性：

必傳參數爲 direction。

（2）使用：

class FlexWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('FlexWidget'),
      ),
      body: Flex(
        direction: Axis.horizontal,
        children: <Widget>[
          Expanded(
            flex: 1, //相當於android中權重weight
            child:Container(
              height: 100,
              color: Colors.red,
            ) ,
          ),
          Expanded(
            flex: 2,
            child:Container(
              height: 100,
              color: Colors.green,
            ) ,
          ),
          Expanded(
            flex: 1,
            child:Container(
              height: 100,
              color: Colors.blue,
            ) ,
          )
        ],
      ),
    );
  }
}

三種顏色塊的寬度比例爲1:2:1。使用 flex 屬性設置比例。

（3）效果：

七、層疊佈局–Stack

相當於Android中的FrameLayout。可配合 Positioned 組件進行子控件位置調整。
（1）源碼屬性：

（2）使用：

class StackWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('StackWidget'),
      ),
      body: Stack(
        alignment: AlignmentDirectional.bottomEnd,//所有的Widget 以Stack的右下角開始對齊
        //fit: StackFit.expand,//使子view的大小和父組件的一樣大
        children: <Widget>[
          Container(
            height: 60,
            width: 60,
            color: Colors.red,
          ),
          Container(
            height: 40,
            width: 40,
            color: Colors.green,
          ),
          Container(
            height: 20,
            width: 20,
            color: Colors.blue,
          ),
        ],
      ),
    );
  }
}

（3）效果：