入门flutter第七篇，布局组件加更

这是我参与2022首次更文挑战的第9天，活动详情查看：2022首次更文挑战

前言

在上篇中，有提到flutter的两个基础布局组件，Column、Flex，而这两个组件脱胎于弹性布局组件Flex，这个组件的用法和表现对于有过网页开发经验的小伙伴来说，就完全是css的那个的display:flex了。

而如果是完全零基础的小伙伴，可以打开word，看一看word中的两端对齐，默认的从左到右的文字布局，以及自定义的从上到下的垂直文字布局。

布局是前端里最简单的部分的， 即便是零基础的同学，只要在脑海之中构建好一个可以理解的模型，就可以轻松接受的。

Flex

在上篇文章中，提到了Column,Row组件，分别用于垂直、水平布局。但是他们都可以算是脱胎于Flex的一种布局方式，如果只是需要用到水平垂直布局的话，则无需用Flex啦。

但是布局，除了水平，垂直还能有什么布局方式呢？这就是Flex的特点了， Flex布局江湖人称弹性盒子布局，那么重点就在于弹性二字之上了。

import 'package:flutter/material.dart';

var main() => runApp(MyApp())

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 这里的主函数，稍微的复习下路由
      routes: {
        "/": (context) => LoginPage(),
        "layout": (context) => LayoutDemo(),
      },
      initialRoute: "layout", // 通过别名指定默认页面，不设置时第一个路由为默认页面
    );
  }
}

class LayoutDemo extends StatelessWidget {
  const LayoutDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Layout"),
      ),
      body: Container(
        color: Colors.grey,
        child: Flex(
          direction: Axis.vertical, // 未添加Expanded时，效果与Row等同
          children: [
            // 如下，权重分别设置为 1 2 1， 空间四等分， 高度设置无效
            Expanded(
              // 包装成一个新的Widget，通过flex设置权重
              child: Container(
                color: Colors.red,
                width: 100,
                height: 100,
              ),
              flex: 1,
            ),
            Expanded(
              child: Container(
                color: Colors.green,
                width: 120,
                height: 100,
              ),
              flex: 2,
            ),
            Expanded(
              child: Container(
                color: Colors.yellow,
                width: 100,
                height: 100,
              ),
              flex: 1,
            ),
          ],
        ),
      ),
    );
  }
}

在上述在代码中，使用Flex布局之后，如果内容仍如同前文的Column,Row一般，不被Expanded包裹，不设置flex属性，其实没有区别 ，而在设置flex属性之后，高度其实是无意义可忽略的，子组件的高度将有自动计算。

可以计算为， 总高度100% ÷ (1 + 2 + 1)， 每份占比25%， 而绿色块占2分，所以绿色占50%高度，红黄占高度25%；