Flutter——新技术进阶之路（二）
Flutter——新技术进阶之路（二）
文章目录
- Flutter——新技术进阶之路（二）
-
- Flutter基础
-
- Flutter一切皆组件
- FlutterApp入口
- Flutter页面组件
- 页面代码Demo示例
Flutter基础
Flutter一切皆组件
对于Flutter而言，万物皆组件是该技术的核心，将面向对象发挥到及至。
- Flutter 里的一切都是由组件组成的，包括页面，布局，属性，以及View、
- 我们可以使用var来声明一个对象，这个对象不是非指定类型的对象。
- 我们也可以指定类型来生命一个对象，eg.
int a = 0; - Flutter的所有组件都是继承自Widget
FlutterApp入口
void main() => runApp(MyApp());
main函数便是App的入口方法，调用runApp方法把我们的入口组件放进来
Flutter页面组件
其实Flutter本身不存在页面这一说，因为一切皆组件，页面不过是一个全屏幕大小的组件
所以我们这里介绍的页面组件，其实是两个基础组件——StatelessWidget 和 StatefulWidget
这两个组件的区别在于你是否要管理组件的状态，如果需要管理组件的状态，那么我们使用StatefulWidget（动态组件）。如果不需要我们使用StatelessWidget（静态组件）。
一个组件的主要工作，就是实现build函数，并在build函数中定义其他低层次的控件，build函数将依次构建直到底层渲染对象。
- StatelessWidget： 静态组件，一般我们写一些静态页面的时候使用，不涉及一切动态的操作，例如请求接口返回数据使页面发生变化这种操作，使用Stateless组件是实现不了的。通常静态组件把所需要的参数都放在构造方法中，一旦定义后就不许改变了，标志性的静态组件Text，Icon，RaisedButton等。
- StatefulWidget： 动态组件，一般我们写关于网络请求数据回显或者组件状态变更的时候会用到，随着用户的操作与输入去更改内部的属性，标志性的动态组件有Image，Form，CheckBox等。
其实widget本身是拥有一个state属性的，这个state有了解过React/React-Native的程序员门可能比较了解，我们可以通过改变state内部的值来改变组件的属性并刷新改组件，stateless组件是不允许修改内部state的，所以继承了StatelessWidget的组件只能在构造方法中初始化属性，而继承了StatefulWidget的组件可以通过调用setState()方法来改变内部属性刷新组件。
页面代码Demo示例
这是一个静态页面
使用StatelessWidget创建一个静态的页面，返回一个Scaffold，中心放一个Text，展示Demo字符串
class Demo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("DEMO"),
),
body: Center(
child: Text("Demo"),
),
);
}
}
以此为例我们介绍一下使用Dart语言开发的Flutter的编码方式
我们创建一个静态组件，名字叫Demo，这个操作我们也可以称之为我们自定义一个Demo静态组件
class Demo extends StatelessWidget{
}
这种写法与java和React/RN的写法类似
接下来我们实现一个组件必备的重载方法build：
class Demo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return null;
}
}
build方法会返回一个widget，如果Demo是一个页面，这个widget就是我们这个组件的页面布局组件，如果这个Demo是一个自定义View，那么这个widget就是我们自定义View的布局。
接下来我们返回一个Scaffold组件，并且在中心放一个Text文本
class Demo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("DEMO"),
),
body: Center(
child: Text("Demo"),
),
);
}
}
这里面的Scaffold组件在以后的章节中我会详细给大家讲，我们这里只要知道它是一个带有返回按钮和标题栏的一个组件，就OK了。Appbar就是标题栏组件，我们在他的title中放一个Text组件，也就是文本组件，里面是大写的DEMO字符串，body属性中我们放一个Center组件，在这个组件的child属性中放一个Text展示Demo字符串，Center组件中，chlid里面的组件都会居中展示，这个组件我们后续也会细讲。
我们新建对象的时候，可以使用new关键字，也可以不使用，在最新的文档中官方已经不推荐使用new关键字了，但是我们new一个对象也不会报错，即：Center() 与 new Center() 等同
所以以上代码我们也可以写成
class Demo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("DEMO"),
),
body: new Center(
child: new Text("Demo"),
),
);
}
}
虽然不报错，以前写js和Java的同学写着也舒服，然而 可以但没必要 ！
有简单的方式我们自然要使用简单的方式，偷懒是进步的明灯~~
这一章节我们就到这里，学海无涯，学无止境，大家共勉