前言

由于筆者本身是Android開發(fā)出身，所以很多方面都是以Android開發(fā)者的角度去看待的。
在Flutter中，萬物皆組件，對于Android開發(fā)者來說，學(xué)習(xí)一門新的語言可能第一時間就是去找Activity在新的語言中是什么樣的，那么這篇文章就帶大家入入門，編寫一個簡單的Hello World界面。

Widget

在Flutter中，想給用戶展示界面，我們一般都是以Widget的形式展現(xiàn)給用戶，其中就有StatefulWidget和StatelessWidget這兩個由Flutter提供給開發(fā)者比較常用的組件。

• StatelessWidget（無狀態(tài)組件）

StatelessWidget 是無狀態(tài)控件，沒有自己的私有數(shù)據(jù)，是純展示型的控件，
說簡單點，就是如果這個界面（組件）只是靜態(tài)展示用，那么你就用StatelessWidget即可，比如只有一個Text展示文本，且文本不會變化。
基本定義過程如下：

class TestPage extends StatelessWidget {
  //在StatelessWidget組件中，build函數(shù)是必須的
  @override
  Widget build(BuildContext context) {
    //在build方法中返回你的UI界面，這里以Text為例
    return Text("Hello World");
  }
}

可能有朋友說了，這也太丑了吧。。。好吧，我也覺得丑，既然這樣，我們就稍微擴展一下，加入Scaffold組件，這個組件的作用以后再說，目前就當(dāng)美化用吧。

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（有狀態(tài)的控件）

StatefulWidget 是有狀態(tài)控件，這樣的控件擁有自己的私有數(shù)據(jù)和業(yè)務(wù)邏輯，
通俗點說，就是你的界面需要發(fā)生變化，就用StatefulWidget，比如點擊一個按鈕，界面上展示的數(shù)字加1
基本定義過程如下（標(biāo)準(zhǔn)模板寫法）：

//定義一個類繼承StatefulWidget
class TestPage extends StatefulWidget {
  @override
  _TestPageState createState() => _TestPageState();
}
//每一個StatefulWidget都需要一個狀態(tài)管理類，繼承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常亮，默認(rèn)給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: () {
              //必須調(diào)用setState方法，否則頁面不會刷新
              setState(() {
                //_count自增
                _count++;
              });
            },
          )
        ],
      ),
    );
  }
}

尾聲

本篇文章就到此結(jié)束了，以后會不定期更新Flutter的文章，盡自己最大的努力幫助大家學(xué)會Flutter！