2019-04-15 Flutter 布局方式

1:Flutter 的 布局

1.1概述:

    1：Flutter 布局有几个对应的类：**Column**-列  **Row**--行  **Container**--容器  **Expanded**--拓展 ， ListView--竖直可滑动  Card--卡片
    2：Flutter 布局原子布局实体: Text--文本  Image--图片  Icon--图标 Color 等

1.2总体 flutter 中的布局 是以原子布局实体为填充物，根据行布局方式 还是 列布局方式 ，以及容器内边距还是外边距，各个子布局是否等分 flex,还是整体的布局 竖直方向上设备高度不够考虑是否可以滑动，进行最终的组合！

1.3 与android之间的比较: 相对android布局，flutter 布局 写起来更方便，代码结构层次分明，虽说布局和业务混合在一起，习惯android 布局编程方式，可能一开始 flutter布局方式 不太习惯，但是 慢慢适应就好了。

2详细介绍Flutter布局实体:

2.1----Container:

       1:是一个容器布局实体，如果布局中需要 margin-外边距，padding-内边距
       2.可以指定容器的width 和 height--高度，以及容器内容的对齐方式，top,center,bottom三种方式
       3:以及内部的填充颜色 color  
       4:child 内部一个填充布局实体
   
     总之在布局中需要上面三种 可以外层嵌套 Container 布局

2.2---Expanded 可拓展

      1:在布局中 需要对整体几个模块之间 需要等分横向 和 竖向 的空间 根据flex属性
      2:根据指定的flex 值，尤其对图片布局原子实体，能够根据分给子布局节点的空间(横向距离空间)
         能够给定的横向距离，保证不失 宽高比例情况下 进行显示图片！

2.3---ListView 竖向可滑动*

      1:通过填充各个 竖直方向的子布局实体 实现当整体布局的高度 超过 设备的高度时，能够滑动布局
      2:属性 children 能够容纳 多个子节点

2.4---Card 卡片布局

    1:效果是 将内部的child 布局具备卡片的效果。

2.5---Row行布局:

    1:可以内置 mainAxisAlignment ，crossAxisAlignment 进行对齐子项。（spaceEvenly，spaceBetween,sapceAround）
    2:对于行(Row)来说，主轴是水平方向，横轴垂直方向
    3:可以内置 多个子节点 children

2.6---Column列布局

    1:可以内置 mainAxisAlignment ，crossAxisAlignment 进行对齐子项。（spaceEvenly，spaceBetween,sapceAround）
    2:对于列(Column)来说，主轴是垂直方向，横轴水平方向
    3:可以内置 多个子节点 children

3详细介绍Flutter原子实体:

3.1 Text文本:

      1: 样式中文本显示 都用的Text封装，可以定义一个TextStyle 样式的实体 多个种类的文本共用。如下:

    style: TextStyle(
         fontSize: Adapt.px(30), //文本大小
         color: Colors.black,  //颜色
         fontWeight: FontWeight.w300, //用于绘制文本的字形的粗细
         fontFamily: 'Roboto', //字体的家族
         letterSpacing: 0.5, //每个文本之间的空格
       ),

3.2 Image 图片封装:

    1:先在pubspec.yaml 文件中的 定义 图片资源路径:

   flutter:
      assets:
           - images/lake.jpg
           - images/nv_1.jpg
           - images/nv_2.jpg
           - images/nv_3.jpg
           - images/nv_4.jpg
           - images/nv_5.jpg
           - images/nv_6.jpg
           - images/1.png

//引入本地图片的对象
Image.asset("images/1.png",height: Adapt.px(800),);

3.3 Icon图标的封装

    1:实体引入 icon的样式 以及对应的颜色

    //餐馆的样式 图标的颜色
    Icon(Icons.restaurant,color:Colors.green[500]),