1. Flex 布局

Flex 布局是一個很經(jīng)典的布局方式，簡單易懂乃正，容易上手住册。多嘗試，知道橫軸縱軸的每一個屬性會布局成什么樣子就掌握了瓮具。

flex.png

2. 基本介紹

Row 和 Column 在 Flutter 里都是最常用的控件之一荧飞。后邊示例需要用到 Container，需要了解的同學點這里名党。
代碼下載地址叹阔。如果對你有幫助的話記得給個關注，代碼會根據(jù)我的 Flutter 專題不斷更新传睹。

3. Row 詳解

3.1 容器創(chuàng)建

為了方便大家理解耳幢，我這里以一個 container 容器作為底層容器承載 Row。然后加三個不同顏色的 Item 加入布局欧啤，來展示 Flex 不同屬性效果睛藻。

優(yōu)雅的編程，首先創(chuàng)建一個 row.dart 文件邢隧。這里我們給定父容器 container 固定大小店印，方便大家了解橫軸，縱軸屬性倒慧，大家也可以自行刪掉 container 的 width 和 height按摘，了解一下沒有設置父容器時包券，自適應效果。

import 'package:flutter/material.dart';

class FMRowVC extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: Text(
            "Row",
          ),
          backgroundColor: Colors.lightBlue,
        ),
        body: Container(
          width: 350,
          height: 200,
          color: Colors.grey,
          child: _row(),
        ),
      ),
    );
  }

  Row _row(){
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          width: 80,
          height: 80,
          color: Colors.orange,
        ),
        Container(
          width: 80,
          height: 80,
          color: Colors.red,
        ),
        Container(
          width: 80,
          height: 80,
          color: Colors.cyan,
        )
      ],
    );
  }
}

3.2 橫軸（mainAxisAlignment）

3.2.1 MainAxisAlignment.start

      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,

main axis start.png

3.2.2 MainAxisAlignment.end

      mainAxisAlignment: MainAxisAlignment.end,
      crossAxisAlignment: CrossAxisAlignment.start,

main axis end.png

3.2.3 MainAxisAlignment.center

      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.start,

main axis center.png

3.2.4 MainAxisAlignment.spaceBetween

      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.start,

main axis spaceBetween.png

3.2.5 MainAxisAlignment.spaceAround

      mainAxisAlignment: MainAxisAlignment.spaceAround,
      crossAxisAlignment: CrossAxisAlignment.start,

main axis spaceAround.png

3.2.6 MainAxisAlignment.spaceEvenly

      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.start,

main axis spaceEvenly.png

3.3 縱軸（CrossAxisAlignment）

3.3.1 CrossAxisAlignment.start

      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,

cross axis start.png

3.3.2 CrossAxisAlignment.end

      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.end,

cross axis end.png

3.3.3 CrossAxisAlignment.center

      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.center,

cross axis center.png

3.3.4 CrossAxisAlignment.stretch

      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.stretch,

corss axis stretch.png

3.3.5 CrossAxisAlignment.baseline

      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.baseline,

出現(xiàn)如下報錯

cross axis baseline error.png

CrossAxisAlignment.baseline 不可以單獨使用院峡，需要配合 textBaseline 使用兴使，我們加上這行可以解決報錯問題。

      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.baseline,
      textBaseline: TextBaseline.alphabetic,

此時報錯解決了照激，但是沒有效果发魄。因為 baseline 屬性是作用于文本的，我們在每個 Item 里均加入一個 Text 文本俩垃，看一下他們的底部對齊樣式励幼。

  Row _row(){
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.baseline,
      textBaseline: TextBaseline.alphabetic,
      children: [
        Container(
          width: 80,
          height: 80,
          color: Colors.orange,
          child: Text("測試", style: TextStyle(fontSize: 10),),
        ),
        Container(
          width: 80,
          height: 80,
          color: Colors.red,
          child: Text("測試", style: TextStyle(fontSize: 20),),
        ),
        Container(
          width: 80,
          height: 80,
          color: Colors.cyan,
          child: Text("測試", style: TextStyle(fontSize: 30),),
        )
      ],
    );

cross axis baseline.jpg

4. Column 詳解

其實同為 Flex 布局，Column 和 Row 大同小異口柳，只是 Row 為橫向排列 children苹粟，Column 縱向排列 children。

4.1 容器創(chuàng)建

為了方便大家理解跃闹，我這里以一個 container 容器作為底層容器承載 Column嵌削。然后加三個不同顏色的 Item 加入布局，來展示 Flex 不同屬性效果望艺。

優(yōu)雅的編程苛秕，首先創(chuàng)建一個 column.dart 文件。這里我們給定父容器 container 固定大小找默，方便大家了解橫軸艇劫，縱軸屬性，大家也可以自行刪掉 container 的 width 和 height惩激，了解一下沒有設置父容器時店煞，自適應效果。

import 'package:flutter/material.dart';

class FMColumnVC extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: Text(
            "Column",
          ),
          backgroundColor: Colors.lightBlue,
        ),
        body: Container(
          width: 350,
          height: 350,
          color: Colors.grey,
          child: _column(),
        ),
      ),
    );
  }

  Column _column(){
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          width: 80,
          height: 80,
          color: Colors.orange,
        ),
        Container(
          width: 80,
          height: 80,
          color: Colors.red,
        ),
        Container(
          width: 80,
          height: 80,
          color: Colors.cyan,
        )
      ],
    );
  }
}

4.2 橫軸（mainAxisAlignment）

4.2.1 MainAxisAlignment.start

      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,

column main axis start.png

4.2.2 MainAxisAlignment.end

      mainAxisAlignment: MainAxisAlignment.end,
      crossAxisAlignment: CrossAxisAlignment.start,

column main axis end.png

4.2.3 MainAxisAlignment.center

      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.start,

column main axis center.png

4.2.4 MainAxisAlignment.spaceBetween

      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.start,

column main axis spaceBetween.png

4.2.5 MainAxisAlignment.spaceAround

      mainAxisAlignment: MainAxisAlignment.spaceAround,
      crossAxisAlignment: CrossAxisAlignment.start,

column main axis spaceAround.png

4.2.6 MainAxisAlignment.spaceEvenly

      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.start,

column main axis spaceEvenly.png

4.3 縱軸（crossAxisAlignment）

4.3.1 CrossAxisAlignment.start

      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,