理解Flutter Demo App

天涯一角發表於2021-03-28
FlutterAPP

用Andorid Studio新建一個Flutter New Project後，一個Flutter Demo App就執行起來了，麻雀雖小，五臟俱全。下面是在Andorid Studio的工程結構。我們開發Flutter App在其lib目錄下進行。
在這裡插入圖片描述
接下來看看main.dart中的程式碼，篇幅原因，刪除其中的註釋。

import 'package:flutter/material.dart';

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

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'),
    );
  }
}

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @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 clicked the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}
複製程式碼

一、第一行import

這個非常好理解，就是匯入flutter/material.dart這個包，它是Flutter實現的material實現，Material Design，中文名：材料設計語言，是由Google推出的設計語言。

import 'package:flutter/material.dart';
複製程式碼

二、App執行入口

通常入口函式都是main函式，接下來就理解一下這個入口程式碼。

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

從程式碼的字面含義非常好理解，直接把MyApp給跑起來，runApp函式的形參是MyApp的一個例項。檢視函式的註釋：Inflate the given widget and attach it to the screen，也就是說它會解析給定的Widget，並將其附加到螢幕上。

三、MyApp StatelessWidget

想要理解下面的程式碼，就要搞清楚StatelessWidget是個什麼東西。

A widget that does not require mutable state.

翻譯過來意思就是不需要可變狀態的widget。實際上使用Flutter開發UI，就是“堆”Widget，包括padding都是Widget。StatelessWidget用於不需要維護狀態的場景，它通常在build方法中通過巢狀其它Widget來構建UI，在構建過程中會遞迴的構建其巢狀的Widget。

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'),
    );
  }
}
複製程式碼

那麼MaterialApp一定也是一個Widget了，它是實現material風格的Widget。

title ---- 指定標題的
theme ---- 主題相關
home ---- 主頁

MyHomePage是另一種Widget。

四、MyHomePage StatefulWidget

A widget that has mutable state.

具有可變狀態的Widget。

一個StatefulWidget類會對應一個State類，State表示與其對應的StatefulWidget要維護的狀態，State中的儲存的狀態資訊可以：

1.在Widget構建時可以被同步讀取;

2.在Widget生命週期中可以被改變，當State被改變時，可以手動呼叫其setState()方法通知Flutter Framework狀態發生改變，Flutter Framework在收到訊息後，會重新呼叫其build方法重新構建Widget樹，從而達到更新UI的目的。

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @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 clicked the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}
複製程式碼

我們看到_MyHomePageState繼承自State，它內部包括_counter field，這是用來計數的。

Scaffold是另一個StatefulWidget，這個單詞意思是腳手架，那麼就是搭架子的意思，那就是搭起來UI骨架，它包括了appBar、body和floatingActionButton等等。

接著碰到了Center Widget，字面意思理解為居中Widget，它的child是個Column Widget，不難從程式碼推測出，這個Widget的children垂直排列的，就像線性佈局從上到下。

最後就是floatingActionButton按鈕Widget。

程式碼裡還涉及了mainAxisAlignment、style等沒有詳細分析，以後會逐步瞭解其用途的。

最後看一下執行起來後的介面。
在這裡插入圖片描述
最後作為一個android開發，看到這些程式碼，一開始很想找xml佈局等價佈局檔案，這在Flutter開發中其實是不存在的，我們把佈局程式碼一起寫到了dart中了。

參考資料

1.https://book.flutterchina.club/chapter3/flutter_widget_intro.html

相關文章