md/flutter/初学.md

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. 路由跳转坑

2. 使用 Navigator.of(context)的方法去跳转 ,其中context对象应该是他断电父级widget的context对象

3. 示例代码

   4. 如何创建一个基本的app

4. 首先定义入口

   程序的入口是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 属性