前言

由于笔者本身是Android开发出身，所以很多方面都是以Android开发者的角度去看待的。
在Flutter中，万物皆组件，对于Android开发者来说，学习一门新的语言可能第一时间就是去找Activity在新的语言中是什么样的，那么这篇文章就带大家入入门，编写一个简单的Hello World界面。

Widget

在Flutter中，想给用户展示界面，我们一般都是以Widget的形式展现给用户，其中就有StatefulWidget和StatelessWidget这两个由Flutter提供给开发者比较常用的组件。

StatelessWidget（无状态组件）

StatelessWidget 是无状态控件，没有自己的私有数据，是纯展示型的控件，
说简单点，就是如果这个界面（组件）只是静态展示用，那么你就用StatelessWidget即可，比如只有一个Text展示文本，且文本不会变化。
基本定义过程如下：

class TestPage extends StatelessWidget {
  //在StatelessWidget组件中，build函数是必须的
  @override
  Widget build(BuildContext context) {
    //在build方法中返回你的UI界面，这里以Text为例
    return Text("Hello World");
  }
}

可能有朋友说了，这也太丑了吧。。。好吧，我也觉得丑，既然这样，我们就稍微扩展一下，加入Scaffold组件，这个组件的作用以后再说，目前就当美化用吧。

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //使用Scaffold（脚手架）组件
    return Scaffold(
      //加入appBar
      appBar: AppBar(
        title: Text("LXT"),
      ),
      //身体里面就放一个Text展示用
      body: Text("Hello World"),
    );
  }
}

Scaffold

StatefulWidget（有状态的控件）

StatefulWidget 是有状态控件，这样的控件拥有自己的私有数据和业务逻辑，
通俗点说，就是你的界面需要发生变化，就用StatefulWidget，比如点击一个按钮，界面上展示的数字加1
基本定义过程如下（标准模板写法）：

//定义一个类继承StatefulWidget
class TestPage extends StatefulWidget {
  @override
  _TestPageState createState() => _TestPageState();
}
//每一个StatefulWidget都需要一个状态管理类，继承State
class _TestPageState extends State<TestPage> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

我们改变一下UI界面，放一个按钮和Text文本上去

class TestPage extends StatefulWidget {
  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  //定义一个int常亮，默认给0
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    //脚手架mei
    return Scaffold(
      appBar: AppBar(
        title: Text("LXT"),
      ),
      //返回一个垂直的布局
      body: Column(
        children: <Widget>[
          Text(_count.toString()),
          RaisedButton(
            child: Icon(Icons.add),
            //按钮的点击事件
            onPressed: () {
              //必须调用setState方法，否则页面不会刷新
              setState(() {
                //_count自增
                _count++;
              });
            },
          )
        ],
      ),
    );
  }
}

尾声

本篇文章就到此结束了，以后会不定期更新Flutter的文章，尽自己最大的努力帮助大家学会Flutter！

全部栏目

Flutter系列——Widget篇

前言

Widget

StatelessWidget（无状态组件）

StatefulWidget（有状态的控件）

尾声