入门flutter第六篇，布局组件在HTML和css中的布局在flutter中确是已经封装好了，只要简单的几个属性配置就

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

一、简单介绍下

从前端转过来的小伙伴们，肯定对布局有了不浅的理解，甚至在工作中，或者日常学习中都是已经用成下意识的技能了。而flutter对于布局相对于网页开发来说还是不同的。

网页开发中使用HTML搭建结构，用css粉刷样式。

而flutter不同，flutter类似于html的声明式布局，但是在布局过程中就可以完成一部分的样式，尤其是和布局相关的样式属性，而视觉样式也是提供在声明的方法当中，也相当于是通过声明的方式完成样式的书写。

此外，flutter将一部分常见的布局封装好了，所以只需要调用一个或者少数几个属性，就可以完成在css中或者说前端开发中，比较常见的布局。

二、inline与block

在刚刚开始学习HTML时，相信大家都通过div标签以及a标签学习、理解了块级标签和行内标签的区别，而在flutter中，使用两个封装好的对象Column,Row来完成类似的声明，通过字面意思可以了解，Column是列布局，即纵向的，而Row是行布局，即横向的。

看个demo

import 'package:flutter/material.dart';

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: Row( // 水平布局
          children: [
            Container(
              color: Colors.red,
              width: 100,
              height: 100,
            ),
            Container(
              color: Colors.green,
              width: 100,
              height: 150,
            ),
            Container(
              color: Colors.blue,
              width: 100,
              height: 100,
            ),
          ],
        ),
      ),
    );
  }
}

纵向布局就是调用Column方法，其他不变

body: Container(
    color: Colors.grey, // 设置容器背景颜色
    child: Column(
        // ... 此处代码不变
    ), // 纵向布局  <<<<<<<<<<<<<<<<<<<<<<<<<<此处有修改
),

三、布局方式

上面只是简单的水平垂直布局，但是肯定不够的啦，在开发当中，还有就是会设计对齐方式，也是配置在Column、Row方法下。

child: Column(
  mainAxisSize: MainAxisSize.max, // block和inline的区别
  textDirection: TextDirection.rtl, // 文字方向
  mainAxisAlignment: MainAxisAlignment.spaceBetween, // 水平对齐方式
  crossAxisAlignment: CrossAxisAlignment.start, // 垂直对齐方式
  children: [], // 纯色方块，代码不变
),