Flutter——新技术进阶之路(二)
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的同学写着也舒服,然而 可以但没必要 !
有简单的方式我们自然要使用简单的方式,偷懒是进步的明灯~~
这一章节我们就到这里,学海无涯,学无止境,大家共勉