|
|
@@ -1,15 +1,16 @@
|
|
|
# flutter 初学
|
|
|
## dart基本变量类型
|
|
|
## flutter 组件资料学习
|
|
|
-1. 组件 Widget
|
|
|
- 1. 无状态组件 **StatelessWidget**
|
|
|
- 1. 有状态组件 **StatefulWidget**
|
|
|
- > 有状态组件被设计成了两个类, 分别是继承StatefulWidget 一个是继承自State
|
|
|
- 1. ***State***
|
|
|
- > 记录StatefulWidget的状态,根据状态返回Widget
|
|
|
- 2. **StatefulWidget**
|
|
|
- > 作为Widget树的一部分
|
|
|
- 1. 生命周期
|
|
|
+#### 1. 组件 Widget
|
|
|
+
|
|
|
+1. 无状态组件 **StatelessWidget**
|
|
|
+2. 有状态组件 **StatefulWidget**
|
|
|
+ > 有状态组件被设计成了两个类, 分别是继承StatefulWidget 一个是继承自State
|
|
|
+ 1. ***State***
|
|
|
+ > 记录StatefulWidget的状态,根据状态返回Widget
|
|
|
+ 2. **StatefulWidget**
|
|
|
+ > 作为Widget树的一部分
|
|
|
+ 1. 生命周期
|
|
|
1. Constructor
|
|
|
构造函数,最开始构建
|
|
|
2. initState
|
|
|
@@ -28,7 +29,7 @@
|
|
|
7. didUpdateWidget
|
|
|
父组件触发重新构建时,会调用此方法
|
|
|
|
|
|
-2. 基础组件
|
|
|
+#### 2. 基础组件
|
|
|
1. 文本
|
|
|
1. 文本布局
|
|
|
- 对其方式 textAlign
|
|
|
@@ -40,17 +41,17 @@
|
|
|
- 字体大小 sontSize
|
|
|
- 文本颜色 color
|
|
|
- 阴影 shadows
|
|
|
-3. 路由跳转坑
|
|
|
+#### 3. 路由跳转坑
|
|
|
1. 使用 ` Navigator.of(context) `的方法去跳转 ,其中context对象应该是他断电父级widget的context对象
|
|
|
2. 示例代码
|
|
|
-4. 如何创建一个基本的app
|
|
|
+#### 4. 如何创建一个基本的app
|
|
|
1. 首先定义入口
|
|
|
> 程序的入口是main函数在main函数中调用创建flutter组件
|
|
|
|
|
|
```
|
|
|
void main() => runApp(new MyApp());
|
|
|
```
|
|
|
-5. 在布局中如何定义宽高
|
|
|
+#### 5. 在布局中如何定义宽高
|
|
|
1. 使用container组件来定义宽高,以及边距
|
|
|
2. container组件必须得包含在一个组件中才能正常的设置宽度,否则设置宽度无效
|
|
|
> 此处的container组件在外面的一个因为有center进行包裹所以可以设置宽度,在内部的container组件因为是直接被包裹在container中无法被设置宽度
|
|
|
@@ -76,7 +77,7 @@
|
|
|
width: double.infinity,
|
|
|
```
|
|
|
|
|
|
-6. 设置单个方向的边框
|
|
|
+#### 6. 设置单个方向的边框
|
|
|
1. 需求描述
|
|
|
1. 需要给一个row组件添加一个下划线进行分割
|
|
|
2. 解决方法
|
|
|
@@ -88,7 +89,7 @@
|
|
|
),
|
|
|
```
|
|
|
|
|
|
-7. 文本超出隐藏
|
|
|
+#### 7. 文本超出隐藏
|
|
|
1. 结构描述,在单个的container中有设置row的组件,row组件内部设置了一个text组件和一个icon组件,text组件内的文字内容过长时会出现异常
|
|
|
2. 解决办法
|
|
|
1. 在 `Text` 文字的外层包裹一层`Expanded` 进行解决
|
|
|
@@ -96,4 +97,7 @@
|
|
|
1. 在 `Row` 组件中使用 `Column` 组件进行包裹文字的话,使用 `Expanded` 进行包裹 `Text` 文件会报错,需要修改为使用 `Column` 进行包裹数据
|
|
|
4. 知识点学习使用
|
|
|
1. 功能
|
|
|
- 可以在 `Row` `Column` `Flex` 等子组件在主轴方向上展开并且进行填充可用空间 如果多个子组件展开,可用空间将会被 flex factor 进行分割
|
|
|
+ 可以在 `Row` `Column` `Flex` 等子组件在主轴方向上展开并且进行填充可用空间 如果多个子组件展开,可用空间将会被 flex factor 进行分割
|
|
|
+
|
|
|
+#### 8. 设置元素的 `padding` 和 `margin` 通过 `EdgeInsets` 对象的属性来进行设置值
|
|
|
+1. `EdgInsets` 属性
|
