Flutter学习之布局

前言：先上效果图

一、使用图片步骤
    1.根目录新建images文件夹并copy图片到此文件夹
    2.在assets中声明此图片
        assets:
            - images/icon.jpg
    3.使用
        new Image.asset(
                  'images/bg.jpg',
                  height: 400.0,
                  width: MediaQuery.of(context).size.width,
                  fit: BoxFit.fill,
                )
                
二、常用布局Row、Column、Stack
    1.Row：规定一行，类似水平的LinearLayout；
    2.Column：规定一列，类似垂直的LinearLayout；
    3.Stack：规定一片区域，可重叠，用Positioned来控制位置，类似RelativeLayout；
    4.共同点：都可以包裹一组Widget，用children包裹；
    
三、常用容器Container、Padding、MaterialApp、Scaffold
    1.Container是最长用的容器，可以设置margin和padding；
    2.Padding很好理解，就是内边距，可以通过EdgeInsets来控制距离；
    3.MaterialApp通常用作StatelessWidget中；
    4.Scaffold必须用在MaterialApp中；
    5.另外如上的四个容器就只可以有一个child、home、或者body，和二中的三个布局是完全不同的，但相互之前都可以根据需求套用

二、以下是写一个简单布局项目时遇到的问题和解答：
    1.如何让ListView中的Item中的元素设置在最右侧？
        通过MediaQuery.of(context).size.width获取屏幕的宽度，然后设置Item容器的宽度为屏幕宽度；
        最后通过alignment: Alignment.topRight属性将元素设置在右上方；
        
    2.如何设置监听？
        这个在之前的总结中提到过，flutter中的监听分两种：
            a.如果当前的Widget支持监听事件，只需在onPressed中设置即可；
            b.如果当前的Widget不支持监听事件，就需要把当前Widget包装到GestureDetector中通过onTap来处理；
            
    3.如何添加ListView数据？
        在此项目中用到两种方式书写ListView：
            a.通过ListView.builder，此种方式可以通过itemCount设置item条目数，通过itemExtent设置item高度，通过itemBuilder实现填充内容；
            b.通过直接new ListView实现，此种方式类似Row和Column的使用方法，可以添加头布局和底布局，更加灵活
        
    4.如何拍照？
        flutter给我的感觉就是相比Android实现起来更加的方便快捷；
        之前Android中如果想要实现拍照功能，要进行一系列复杂的步骤，最后还要考虑拍照图片尺寸的大小进行压缩；
        这些在flutter中就简单=几句代码就可以实现，步骤如下：
            a.pubspec.yaml中添加配置：english_words: ^3.1.0
            b.在dart文件中导入：import 'package:image_picker/image_picker.dart';
            c.直接使用：var image = await ImagePicker.pickImage(source: ImageSource.gallery);
            d.ImageSource中可选择gallery或者camera；
        不过，每次刷新state时，选取的图片都会被初始化，这个问题还没有本人还没找到好的解决办法；
    5.如何存储拍照文件到本地？
        还没有研究；
        
    6.如何获取界面的宽高？
        通过MediaQuery.of(context).size获取界面的宽高；
        
    7.ListView为什么一定要Expanded包裹？
        这个貌似也不一定，要看此ListView写在哪个容器里面；
        Scaffold中貌似不需要Expanded包裹，但是Container好像是需要的；
        root cause还未找到；