Flutter基础布局

由上面的架构图可以看出来，flutter最上层是google 的纸墨设计Material Design（MaterialApp）组件，关于Material Design设计理念大家可以去官网安利一下啊material.io

在MaterialApp下面是所有组件的基类Widget，而在Widget的上层是statelessWdiget（无状态组件）、statefulWidget（有状态组件）和InheritedWidget(可以向子类View树种传递信息)，包括我们在上篇文章中用到的Scaffold、Center、Text都是statelessWdiget、statefulWidget的子类。

开始之前，我们需要知道一些名词的含义和作用，在这里不懂的也没有关系，逐渐往后面看，往后面使用后，会有越来越清晰的理解。

• MaterialApp

是我们app开发中常用的符合MaterialApp Design设计理念的入口Widget。

• StatelessWidget

StatelessWidget是非动态的，它不依赖于除了传入数据以外的任何其他数据，这意味着改变其显示的唯一方式，就是改变传入其构造函数的参数。比如Text，Button，Icon这些控件。

• StatefulWidget

StatefulWidget是动态的，他们允许我们创建一个能动随时间改变内容的widget，并且不依赖于其初始化时被传入的静态状态，可以随着用户的输入，各种形式的异步回包或其他形式的状态变化而变化。比如Image，CheckBox，Form这些控件。

• Scaffold

Scaffold 翻译过来就是脚手架的意思，它实现了基本的 Material Design 可视化布局结构。简单的说，Scaffold就是一个提供 Material Design 设计中基本布局的 widget。

const Scaffold({
  Key key,
  this.appBar, // 标题栏
  this.body,  // 用于显示当前界面主要内容的Widget
  this.floatingActionButton, // 一个悬浮在body上的按钮，默认显示在右下角
  this.floatingActionButtonLocation, // 用于设置floatingActionButton显示的位置
  this.floatingActionButtonAnimator, // floatingActionButton移动到一个新的位置时的动画
  this.persistentFooterButtons, // 多状态按钮
  this.drawer, // 左侧的抽屉菜单
  this.endDrawer, //  右'侧的抽屉菜单
  this.bottomNavigationBar,// 底部导航栏。
  this.bottomSheet, // 显示在底部的工具栏
  this.backgroundColor,// 内容的背景颜色
  this.resizeToAvoidBottomPadding = true, // 控制界面内容 body 是否重新布局来避免底部被覆盖，比如当键盘显示的时候，重新布局避免被键盘盖住内容。
  this.primary = true,// Scaffold是否显示在页面的顶部
}) 

• Container

它是一个结合了绘制（painting）、定位（positioning）以及尺寸（sizing）widget的widget。

Container({
    Key key,
    this.alignment,
    this.padding,
    Color color,
    Decoration decoration,
    this.foregroundDecoration,
    double width,
    double height,
    BoxConstraints constraints,
    this.margin,
    this.transform,
    this.child,
  })

alignment:控制child的对齐方式
decoration:绘制在child后面的装饰

• padding/margin

控件加入内/外边距。属性如下：

EdgeInsets.all(12),// 指定四个方向相同的值
EdgeInsets.fromLTRB(10, 20, 30, 40),// 分别指定四个方向的值
EdgeInsets.only(left: 10,right: 30),// 指定任意方向的值EdgeInsets.symmetric(vertical: 10,horizontal: 50),//指定水平（left right）或垂直方向（top，bottom）的值。

• Row

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("title"),
        ),
        body: Container(
          height: 200,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.end,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Container(
                color: Color(0xFFFF0000),
                child: Text(
                  "text1",
                  style: TextStyle(fontSize: 25),
                ),
              ),
              Container(
                color: Color(0xFF00FF00),
                child: Text(
                  "text1",
                  style: TextStyle(fontSize: 25),
                ),
              ),
              Container(
                color: Color(0xFF0000FF),
                child: Text(
                  "text1",
                  style: TextStyle(fontSize: 25),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

属性：

crossAxisAlignment:子组件对齐方式
mainAxisAlignment:子组件排列方式
mainAxisSize：Main 轴大小，相当于match_parent,wrap_content
verticalDirection:从下向上或从上向下摆放子组件
children：放置的多个子组件，值是一个 Widget 数组

效果：

• Column

Column 就相当于一个 orientation 为 vertical 的 LinearLayout，它的用法完全与 Row 一样。可直接将上面例子的Row改为Column。