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

   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 进行分割