Flutter——新技术进阶之路（二）

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的同学写着也舒服，然而 可以但没必要 ！
有简单的方式我们自然要使用简单的方式，偷懒是进步的明灯~~

这一章节我们就到这里，学海无涯，学无止境，大家共勉