# flutter 初学
## dart基本变量类型
## flutter 组件资料学习
#### 1. 组件 Widget
    
1. 无状态组件 **StatelessWidget**
2. 有状态组件 **StatefulWidget**
     > 有状态组件被设计成了两个类, 分别是继承StatefulWidget 一个是继承自State
     1. ***State***
          > 记录StatefulWidget的状态,根据状态返回Widget
     2. **StatefulWidget**
          > 作为Widget树的一部分 
          1. 生命周期
               1. Constructor
                    构造函数,最开始构建  
               2. initState
                    最开始创建时,可以在其中进行数据初始化数据,因为这个方法重写了父类的方法,所以必须调用super.
                    源码中有一个注解 @mustCallSuper
               3. didChangeDepdencies
                    > 该方法会在两种情况下被调用
                    1. 调用initState 时会进行调用
                    2. 从其他对象中依赖的数据发生改变时
               4. build
               5. dispose
                    当前的Widget不在使用时会调用此方法进行销毁.
                    思考: 组件被销毁前执行的函数,用来保存数据? 
               6. setState
                    更改组件的数据,之后会根据最新的数据来重新调用build方法来构建对应的组件Widget
               7. didUpdateWidget
                    父组件触发重新构建时,会调用此方法 
   
#### 2. 基础组件
   1. 文本
      1. 文本布局
         - 对其方式 textAlign
         - 排版方向 textDirection
         - 最大行数 maxLines
         - 文本截断规则 overflow
      2. 文本样式 style
         - 字体名称 fontFamily
         - 字体大小 sontSize
         - 文本颜色 color
         - 阴影 shadows 
#### 3. 路由跳转坑
   1. 使用 ` Navigator.of(context) `的方法去跳转 ,其中context对象应该是他断电父级widget的context对象
   2. 示例代码
#### 4. 如何创建一个基本的app
   1. 首先定义入口
      > 程序的入口是main函数在main函数中调用创建flutter组件

     ```
          void main() => runApp(new MyApp()); 
     ```
#### 5. 在布局中如何定义宽高
     1. 使用container组件来定义宽高,以及边距
     2. container组件必须得包含在一个组件中才能正常的设置宽度,否则设置宽度无效
          > 此处的container组件在外面的一个因为有center进行包裹所以可以设置宽度,在内部的container组件因为是直接被包裹在container中无法被设置宽度
               ```
                    Center(
                         child: Container(
                              child: Container(
                                   child: Text("你好"),
                                   color: Colors.red,
                                   width: 100.0,
                                   height: 50.0,
                              ),
                              width: 240.0,
                              height: 100.0,
                              color: Colors.green,
                              padding: EdgeInsets.symmetric(vertical: 5),
                         ),
                    )
               ```
     3. 设置填满屏幕的宽度,下面两种方式都可以
        ```
          width: MediaQuery.of(context).size.width,
          width: double.infinity,
        ``` 

#### 6. 设置单个方向的边框
   1. 需求描述
      1. 需要给一个row组件添加一个下划线进行分割
   2. 解决方法
      1. 在row组件外部包裹一层   `Container` 进行设置装饰器属性`decoration` 赋值 `BoxDecoration` ,在其中设置border属性,赋值为
          ```
               bottom: BorderSide(
                    width: 0.5,
                    color: Colors.red,
               ),
          ```

#### 7. 文本超出隐藏
   1. 结构描述,在单个的container中有设置row的组件,row组件内部设置了一个text组件和一个icon组件,text组件内的文字内容过长时会出现异常
   2. 解决办法
      1. 在 `Text` 文字的外层包裹一层`Expanded` 进行解决
   3. 变种
      1. 在 `Row` 组件中使用 `Column` 组件进行包裹文字的话,使用 `Expanded` 进行包裹 `Text` 文件会报错,需要修改为使用 `Column` 进行包裹数据
   4. 知识点学习使用
      1. 功能
         可以在 `Row` `Column` `Flex` 等子组件在主轴方向上展开并且进行填充可用空间 如果多个子组件展开,可用空间将会被 flex factor 进行分割 

#### 8. 设置元素的 `padding` 和 `margin` 通过 `EdgeInsets` 对象的属性来进行设置值
1. `EdgInsets` 属性