flutter 初学

dart基本变量类型

flutter 组件资料学习

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

在布局中如何定义宽高

使用container组件来定义宽高,以及边距

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),
            ),
       )

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

初学.md 4.2 KB Історія Запис

flutter 初学

dart基本变量类型

flutter 组件资料学习

初学.md 4.2 KB

Історія Запис