運行第一個Flutter App

前文

1. 運行第一個Flutter App
2. Flutter基礎Widgets-Text
3. Flutter可滾動Widgets-ListView
4. Flutter主題切換之flutter redux
5. Flutter插件開發之APK自動安裝
6. Flutter 開發一個 GitHub 客戶端OpenGit及學習總結

文本是在 AndroidStudio 開發工具中開發 Flutter 的。

我的博客

運行第一個Flutter App

1：啓動AndroidStudio，選擇Start a new Flutter project。

2：選擇Flutter Application。

3：配置信息。

4：設置包名。

5：運行flutter_hello_world App。

分析lib/main.dart

1： Flutter程序入口。

Flutter程序入口是一個main()函數：

void main() => runApp(MyApp());
複製代碼

在main()函數中調用runApp()函數，傳入一個MyApp()widget的參數。

2：建立一個無狀態的部件（Stateless widget）

有狀態的部件和無狀態部件的區別主要在於狀態的改變：

• Stateless widgets 是不可變的, 這意味着它們的屬性不能改變 - 全部的值都是最終的。

• Stateful widgets 持有的狀態可能在widget生命週期中發生變化. 實現一個 stateful widget 至少須要兩個類:

  1. 一個 StatefulWidget類。

  2. 一個 State類。 StatefulWidget類自己是不變的，可是 State類在widget生命週期中始終存在。

MyApp()是一個無狀態的部件，全部的界面UI都是在build()函數中處理，以下面代碼所示

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
複製代碼

在build()函數中引用了MaterialApp()widget，主要實現了Material風格的相關部件，包括標題、主題、主界面。

2：建立一個有狀態的部件（Stateful widget）

MyHomePage()是一個有狀態的部件，除了建立State類以外幾乎沒有其餘任何東西，以下面代碼所示

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}
複製代碼

3：建立_MyHomePageState()類

該類持有MyHomePage() widget的狀態，而且該應用程序的大部分代碼都在該類中。界面主要展現標題欄、居中展現兩行文本以及懸浮按鈕，以下面代碼所示

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            'You have pushed the button this many times:',
          ),
          Text(
            '$_counter',
            style: Theme.of(context).textTheme.display1,
          ),
        ],
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: _incrementCounter,
      tooltip: 'Increment',
      child: Icon(Icons.add),
    ),
  );
}
複製代碼

4：添加交互

與有狀態的部件進行交互，主要是經過setState()函數，當調用該函數時，會觸發build()函數刷新，以下面代碼所示

setState(() {
});
複製代碼

用戶能夠經過點擊懸浮按鈕，來刷新點擊的次數，以下面代碼所示

void _incrementCounter() {
  setState(() {
    _counter++;
  });
}
複製代碼

這部份內容就不深究了，簡單瞭解一下就行