Flutter和Dart系列三：视图与数据如何关联

Flutter和Dart系列三：视图与数据如何关联

今天我们就从零开始写代码吧，要实现的功能很简单，就是：点击屏幕上的FAB，实现文本内容替换。 新建一个Flutter项目，将main.dart中的代码都删除，我们从头开始写。

1. 导包

import "package:flutter/material.dart";

2. 编写主函数：

void main(){
    runApp(SampleApp());
}

class SampleApp extends StatelessWidget{
    @override
    Widget build(BuildContext context){
        //…….
    }
}

• a. runApp()：

  Inflate the given widget and attach it to the screen.

  也就是说，这个地方需要传入一个Widget，并且这个Widget是会显示在屏幕上。告诉大家，这里传入的widget就是root widget。这里有个概念需要大家知道一下：widget tree。觉得也并不陌生，想什么View Tree，DOM Tree，这种涉及到控件设计的，肯定是使用树这种数据结构来组织的。

• b. Widget：

  它的地位可以类比Android的View： 

  In Flutter, almost everything is a widget，including alignment, padding, and layout。

  Widget又可以分为两大类：StatelessWidget和StatefulWidget。顾名思义，一个是不带状态的Widget，一个是带状态的Widget。那么什么叫不带状态呢？就是不会变化。如果你的widget在进行网络请求之后或者用户操作之后会产生变化，那么这个时候就需要使用StatefulWidget。更本质地说，是与之对应的数据的变化，才会引起UI的变化。在Android开发中，尽管你采用mvc、mvp模式去架构app，但是你还是需要持有需要变化UI对象的引用，然后将数据的变化通过这个引用设置到UI控件上，你还是需要和UI对象打交道。可能这么说你还不清楚，我们通过代码来帮助理解。

3. 继续添加代码，实现SampleApp的build方法：

@override
Widget build(BuildContext context){
    return MaterialApp(
        title: “Sample App”,
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
            primaryColor: Colors.blue),
        home: SampleAppPage(),
    );
}

class SampleAppPage extends StatefulWidget{
    @override
    State<StatefulWidget> createState(){
        return SampleAppPageState();
    }

}

class SampleAppPageState extends State<SampleAppPage>{
    Strign _textToShow = “I Like Flutter”;

    @override
    Widget build(BuildContext context){
        return Scaffold(
            appBar: AppBar(
                title: Text(“Sample App”),
            ),
            body: Center(child: Text(_textToShow)),
            floatingActionButton: FloatingActionButton(
                onPressed: _updateText,
                tooltip: “Update Text”,
                child: Icon(Icons.update),
            ),
        );
    }
}

写到这个地方呢，这个_updateText肯定会报错，继续去实现这个方法，也是这篇文章的核心：

void _updateText() {
    setState(() {
        _textToShow = “Flutter is Awesome!”;
    });
}

这里呢，大家可以不用去纠结具体某个Widget的作用，以及某些属性的作用，这不是我们现在的重点，后面我们会重点去学习。 运行起来，这里就不去截图了。

效果已经出来了。现在我们再回想起前面我们关于Widget那块的描述。 假设这个地方是使用Android去实现： 在_updateText()方法里，我们肯定需要拿到TextView对象，然后通过setText()方法，将新的文本内容设置到TextView上。 再来看看Flutter中的关于这块的处理：

setState((){
    //直接变换数据的值，不需要所谓的TextView对象
})

这样，我们只需要关注数据的变化，UI的变化伴随着数据的变化也发生了变化。从某种意义上说，这是一个单向的mvvm，setState实际上和微信小程序中的setData是有类似的作用。