目錄

• Flutter 探索（一）入門前言
• Flutter 探索（二）環(huán)境搭建配置
• Flutter 探索（三）Dart 語法介紹（暫無內(nèi)容）
• Flutter 探索（四）工程文件目錄結(jié)構(gòu)及 main.dart

成功運行了第一個項目棺克，那么這一節(jié)我們來了解一下 Flutter 的文檔目錄一死，以及默認(rèn)模板工程-計數(shù)器的 main 文件 绑莺。

計數(shù)器 Demo.png

Flutter 工程文件目錄結(jié)構(gòu)

工程文件目錄.png

Flutter 入口 main.dart 文件

main.dart 是整個項目的入口，一切從這里開始末早。

入口方法

import 'package:flutter/material.dart';
//導(dǎo)入的包路徑

void main() {
  runApp(MyApp());
}

• main() 方法是 Dart 的入口方法
• runApp() 方法是 Flutter 的入口方法
• MyApp() 是工程打開的第一個組件

根組件

在 Flutter 中所有 UI 都是由組件（Widget）構(gòu)成的赎婚，所以主頁面也就是一個組件（Widget）。

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
        // This makes the visual density adapt to the platform that you run
        // the app on. For desktop platforms, the controls will be smaller and
        // closer together (more dense) than on mobile platforms.
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

• class MyApp：該組件名稱玖像，也是類名紫谷。
• extends StatelessWidget：繼承的組件為 StatelessWidget，該組件后面具體講捐寥。
• Widget build(BuildContext context)：StatelessWidget 組件的方法碴里，在這里返回的即為 MyApp 組件的布局。
• MaterialApp：這是一個 Material Design 風(fēng)格的根控件上真，如果我們想使用其他已經(jīng)封裝好的 Material Design 風(fēng)格的 Widget，就必須使用 MaterialApp羹膳。
• title睡互、theme、home：組件可以設(shè)置的屬性陵像，與 js 中屬性相似就珠。
• home：Widget 類型，主界面

主布局

上面根組件（暫且這么叫）MyApp 中醒颖，home 的值 MyHomePage 即為計時器的主頁面妻怎，這里我們看一下 MyHomePage 中都有什么吧。

1. StatefulWidget

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

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
  //創(chuàng)建 _MyHomePageState()
}

這里主要是 StatefulWidget 組件的使用泞歉，這個放在后面和上邊的 StatelessWidget 一起講逼侦，這里只需要知道創(chuàng)建了 _MyHomePageState() 即可。

2. State

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  // 創(chuàng)建 int 型變量 _counter腰耙，默認(rèn)值為 0

  void _incrementCounter() { //定義方法 _incrementCounter()
    setState(() { 
    // RN 中也有 setState 方法榛丢，
    // 這個方法的作用是，在這里面對前邊定義的變量（如 _counter）改變值挺庞，
    // 之后使用這個變量（如 '$_counter',）的地方的值會立刻變化晰赞，不需要再獲取到控件設(shè)置新值，
    // 這就是響應(yīng)式編程。
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) { // 組件的方法掖鱼，在這里返回的即為 _MyHomePageState 組件的布局然走。
    return Scaffold( // Scaffold 實現(xiàn)了 Material Design 的基本布局結(jié)構(gòu)，例如 AppBar戏挡、Drawer芍瑞、SnackBar 等，它經(jīng)常會作為 MaterialApp 的子Widget增拥，Scaffold 會自動填充可用的空間啄巧，這通常意味著它將占據(jù)整個窗口或屏幕，并且 Scaffold 會自動適配不同的屏幕掌栅。
      appBar: AppBar( //標(biāo)題 bar
        
        title: Text(widget.title),
      ),
      body: Center( // 頁面內(nèi)容
       
        child: Column( //布局方式秩仆，垂直線性排列
         
          mainAxisAlignment: MainAxisAlignment.center, // 對齊方式：居中對齊
          children: <Widget>[ // children：子組件數(shù)組，可以看到猾封，下面往這個數(shù)組中放置了兩個 Text()澄耍。
            Text( // 這里就是頁面中看到的 “You have pushed the button this many times:” 文字的組件。
              'You have pushed the button this many times:',
            ),
            Text( //點擊后更改的數(shù)字值就是這個 Text
              '$_counter', // _counter 是前邊定義的變量晌缘，這是引用的方法齐莲。
              style: Theme.of(context).textTheme.headline4, // 樣式
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton( // 頁面中右下角圓形懸浮按鈕 FAB。
        onPressed: _incrementCounter,
        // onPressed 點擊事件：調(diào)用了上邊定義的 _incrementCounter()方法磷箕，
        //在這個方法中實現(xiàn)了 _counter++选酗，
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), 
    );
  }
}

這里便是實現(xiàn)計時器最關(guān)鍵的部分。各個部分的說明也寫在了上面的注釋中岳枷。

結(jié)束

由此可以看到 Flutter 的頁面是由一個個的組件嵌套而成芒填，不少人會害怕嵌套地獄，其實根本沒啥事空繁，你看這個 Demo 中的包含關(guān)系不就是：

  MyApp ? MyHomePage(_MyHomePageState) ? Scaffold ? AppBar & Center & FloatingActionButton
  Center ? Column ? Text & Text ?

但是可以封裝出來殿衰，用自定義組件繼承，這樣代碼中就不會出現(xiàn)嵌套地獄盛泡，而且新的組件可以新建文件來寫闷祥，只要注意導(dǎo)包（路徑），整體代碼可讀性很高傲诵，而且可以封裝的很簡潔凯砍，反而脈絡(luò)更加清晰。

歡迎大家留言或者發(fā)郵件給我：
郵箱：ymwmlxl@gmail.com