目錄

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

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

計(jì)數(shù)器 Demo.png

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

工程文件目錄.png

Flutter 入口 main.dart 文件

main.dart 是整個(gè)項(xiàng)目的入口，一切從這里開始。

入口方法

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

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

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

根組件

在 Flutter 中所有 UI 都是由組件（Widget）構(gòu)成的，所以主頁(yè)面也就是一個(gè)組件（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：這是一個(gè) Material Design 風(fēng)格的根控件，如果我們想使用其他已經(jīng)封裝好的 Material Design 風(fēng)格的 Widget，就必須使用 MaterialApp。
• title、theme、home：組件可以設(shè)置的屬性，與 js 中屬性相似。
• home：Widget 類型，主界面

主布局

上面根組件（暫且這么叫）MyApp 中，home 的值 MyHomePage 即為計(jì)時(shí)器的主頁(yè)面，這里我們看一下 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 組件的使用，這個(gè)放在后面和上邊的 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 方法，
    // 這個(gè)方法的作用是，在這里面對(duì)前邊定義的變量（如 _counter）改變值，
    // 之后使用這個(gè)變量（如 '$_counter',）的地方的值會(huì)立刻變化，不需要再獲取到控件設(shè)置新值，
    // 這就是響應(yīng)式編程。
      _counter++;
    });
  }

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

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

結(jié)束

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

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

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

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