Widget基本了解
上一节,我们认识了如何创建一个Flutter工程,认识了工程目录, 也知道了lib目录是我们将要开发程序的目录, 目录中的main.dart是我们整个项目的入口文件.接下来我们将了解Widget,但是在认识Widget之前,我们先好好认识一个入口文件,以及入口文件中的入口方法
1. 入口文件,入口方法
1.1 入口文件和入口方法的了解
每一个flutter项目中的lib目录里面都有一个main.dart,这个文件就是flutter的入口文件
// main.dart
void main(){
runApp(MyApp())
}
// 可以简写为
void main() => runApp(MyApp())
其中的main方法是dart的入口方法,runApp是flutter 的入口方法
MyApp是自定义的一个组件
也就是说项目运行的流程如下
- 项目运行首先会找到入口文件
main.dart - 在入口文件
main.dart中执行dart的入口方法main(){} - 在入口方法中通过
runApp方法调用MyApp方法,MyApp则为Flutter的入口组件() - 因此程序通过Flutter的入口组件开始进入到Flutter组件中运行Flutter代码
1.2 通过示例了解入口方法
既然MyApp是Flutter程序的入口组件,那么我们就把这个入口改成自定义的
import 'package:flutter/material.dart';
void main(){
runApp(Center( // 标准写法应该是new Center 只不过data运行类不写new
child: Text( // 这是dart中的命名参数
"你好flutter",
textDirection: TextDirection.ltr // 文字显示的方向性
)
));
}
示例结果:
使用说明:
Center和Text是Flutter内置的组件,先做了解,之后再细讲.
其实像示例中这样的开发方式,非常不友好,如果代码过多的话,耦合性就会非常高,所以我们可以抽出为单独的组件
那么接下来,我们就来了解flutter组件的一些概念,
2. Widget简介
2.1 Widget
Widget简单说明
- Widget只是UI元素的一个配置数据
- Widget类本身就是一个抽象类,一般不会直接使用Widget类来实现组件
- 通常会使用继承Widget的StatelessWidget和StatefulWidget两个抽象类
2.2 关于Flutter中的组件
Flutter组件说明
- 在flutter中自定义组件其实就是一个类,
- 组件类需要继承StatelessWidget/StatefulWidget两个抽象类
- StatelessWidget 是无状态组件,状态不可变的widget
- StatefulWidget 是有状态的组件,持有的状态可能在widget生命周期改变
3. StatelessWidget 抽象类
3.1 简单说明
StatelessWidget抽象类简单说明:
- StatelessWidget是无状态的抽象类,一般用于不需要维护状态的场景.
- 通过在
build方法中通过嵌套其他Widget来构建UI
3.2 Context
上面说到了StatelessWidget通过build嵌套其他组件来构建UI,那么build方法优惠接受什么值呢?
Context说明:
-
build方法接受一个context参数,context却是BuildContext的实例.表示当前widget上下文 - 每一个
widget都会对应一个context对象 -
context则是当前widget在widget树中位置需要执行的一个句柄
3.3 示例
通过示例了解StatelessWidget和Context.
本示例就是将上面得示例,从runApp()方法中的组件抽离出来,
import 'package:flutter/material.dart';
void main() {
runApp(App());
}
// App 就是我们自定义的类(也可以叫组件),这个类覆写了无状态抽象类
class App extends StatelessWidget{
@override
Widget build(BuildContext context){
// 返回一个组件
return Center(
child: Text(
"你好,Flutter", // 文本内容
textDirection: TextDirection.ltr, // 文字的显示方向
// 处理了文字样式
style: TextStyle(
fontSize: 40, // 文字的大小
color: Colors.yellow // 文字的颜色
)
)
);
}
}
在示例中我们将runApp()方法里的内容抽离为一个自定义的组件.并给文本添加了一些样式.
这就是对于StatelessWidget的认识, 至于StatefulWidget里面涉及到状态,已经状态的生命周期,
因此StatefulWidget抽象类,我们放在后面再去认识它.
3. Flutter SDK内置组件库的介绍
Flutter提供了一套丰富、强大的基础组件，
在基础组件库之上Flutter又提供两套视觉风格:
- Material风格（Android默认的视觉风格）
- Cupertino风格（iOS视觉风格）的组件库。
要使用基础组件库，需要先导入：
import 'package:flutter/widgets.dart';
3.1 基础组件库的了解
-
Text：该组件可让您创建一个带格式的文本。 -
Row,Column基于FlexBox布局模型,可以在水平(Row)和垂直(Column)方向创建灵活布局的弹性布局类Widget -
Stack基于Web中绝对布局模式设计的布局方案,取代了线性布局 -
Container:是可以创建矩形视觉的元素.- 可以通过
BoxDecoration来装饰元素,入background,边框或者阴影 - 可以设置边距(margin),填充(padding),以及应用大小的约束
- 可以通过
3.2 Material组件
Flutter提供了一套丰富的Material组件
Material组件说明:
- 可以帮助我们构建遵循Material Design设计规范的应用程序
- 应用程序已
MaterialApp组件开始, - 该组件会在应用程序根部创建一些必要的组件,比如
Thema组件用于分配应用主题
Material还有一些其他的属性,下节在聊, 这里先做简单的了解