Flutter學習(二):編寫Flutter應用

來自文檔:https://flutterchina.club/get-started/codelab/

第一步:創建Flutter應用

創建一個默認的Flutter應用後,將一下代碼複製到 lib/main.dart 中

import 'package:flutter/material.dart';

//運行Flutter應用,創建了一個自己實現的Widget對象
void main() => runApp(new MyApp());

//實現的Widget類
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),//AppBar的title
        ),
        body: new Center(
          child: new Text('Hello World'),//屏幕中間的文字
        ),
      ),
    );
  }
}

使用Android Studio的格式化快捷鍵同樣有效.

代碼被複制進Android Studio之後,自動添加了一些註釋,我們可以更清晰地看到其結構

運行新建的應用,其界面如下:

官方給出的代碼分析如下:

 1.	本示例創建一個Material APP。Material是一種標準的移動端和web端的視覺設計語言。 Flutter提供了一套豐富的Material widgets。

 2.	main函數使用了(=>)符號, 這是Dart中單行函數或方法的簡寫。

3.	該應用程序繼承了 StatelessWidget，這將會使應用本身也成爲一個widget。 在Flutter中，大多數東西都是widget，包括對齊(alignment)、填充(padding)和佈局(layout)

4.	Scaffold 是 Material library 中提供的一個widget, 它提供了默認的導航欄、標題和包含主屏幕widget樹的body屬性。widget樹可以很複雜。

5.	widget的主要工作是提供一個build()方法來描述如何根據其他較低級別的widget來顯示自己。

6.	本示例中的body的widget樹中包含了一個Center widget, Center widget又包含一個 Text 子widget。 Center widget可以將其子widget樹對其到屏幕中心。

第二步:使用外部包(package)

在這一步中，我們將使用一個名爲english_words的開源軟件包 ，其中包含數千個最常用的英文單詞以及一些實用功能.

1. pubspec文件管理Flutter應用程序的assets(資源，如圖片、package等)。 在pubspec.yaml中，將english_words（3.1.0或更高版本）添加到依賴項列表：
   

2. 在Android Studio的編輯器視圖中查看pubspec時，單擊右上角的 Packages get，這會將依賴包安裝到您的項目。您可以在控制檯中看到以下內容：
   
   一直卡在這裏了,也沒有辦法停止.然後再次點擊Packages get,下方會提示:
   Waiting for another flutter command to release the startup lock…

   解決辦法：
   當你的項目異常關閉，或者android studio用任務管理器強制關閉，下次啓動就會出現上面的一行話，
   此時需要打開 flutter/bin/cache/lockfile，刪除就行了
   或者直接用下面的命令：rm ./flutter/bin/cache/lockfile

   開啓了科學上網後,再次點擊Packages get, 控制檯輸出以下內容:
   flutter packages get
   Running “flutter packages get” in startup_namer…
   Process finished with exit code 0
   導入成功

3. 在 lib/main.dart 中, 引入 english_words

    import 'package:flutter/material.dart';
    import 'package:english_words/english_words.dart';
   

4. 使用 English words 包生成文本來替換字符串“Hello World”.

   Tip: “駝峯命名法” (稱爲 “upper camel case” 或 “Pascal case” ), 表示字符串中的每個單詞（包括第一個單詞）都以大寫字母開頭。所以，“uppercamelcase” 變成 “UpperCamelCase”
   

   進行以下更改, 如註釋部分所示:

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final wordPair = new WordPair.random();//獲取WordPair對象
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          //child: new Text('Hello World'),
          child: new Text(wordPair.asPascalCase),//使用WordPair對象生成文本
        ),
      ),
    );
  }
}

5. 如果應用程序正在運行，請使用熱重載按鈕 (lightning bolt icon) 更新正在運行的應用程序。每次單擊熱重載或保存項目時，都會在正在運行的應用程序中隨機選擇不同的單詞對。 這是因爲單詞對是在 build 方法內部生成的。每次MaterialApp需要渲染時或者在Flutter Inspector中切換平臺時 build 都會運行.

第三步: 添加一個 有狀態的部件（Stateful widget）
Stateless widgets 是不可變的, 這意味着它們的屬性不能改變 - 所有的值都是最終的.

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

1. 一個 StatefulWidget類。
2. 一個 State類。 StatefulWidget類本身是不變的，但是 State類在widget生命週期中始終存在.

在這一步中，您將添加一個有狀態的widget-RandomWords，它創建其State類RandomWordsState。State類將最終爲widget維護文本的變化。

封裝一個Widget,將文本的獲取轉移到Widget中進行

class RandomWordsWidget extends StatefulWidget {
  @override
  createState() => new RandomWordsStatus();
}

class RandomWordsStatus extends State<RandomWordsWidget> {
  @override
  Widget build(BuildContext context) {
    final wordPair = new WordPair.random();
    return new Text(wordPair.asPascalCase);
  }
}

使用封裝好的Widget替換原來用來顯示文字的Text

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //final wordPair = new WordPair.random();
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          //child: new Text('Hello World'),
          //child: new Text(wordPair.asPascalCase),
          child: new RandomWordsWidget(),
        ),
      ),
    );
  }
}

現在每次熱加載可以看到隨機生成的文字.