本節(jié)大綱

PS：轉(zhuǎn)載請注明出處
作者: TigerChain
地址: http://m.itdecent.cn/p/912ec2a640fb
本文出自 TigerChain 簡書 從頭開始整 Flutter系列

教程簡介

• 1、閱讀對象
  本篇教程適合新手閱讀，老手直接略過
• 2、教程難度
  初級，本人水平有限，文章內(nèi)容難免會出現(xiàn)問題，如果有問題歡迎指出，謝謝

正文

一、目錄結(jié)構(gòu)

在上一小節(jié)中我們介紹了 Flutter 的安裝方法以及 Flutter 的開發(fā)環(huán)境「IDE」，并且運行了 Flutter 默認給我們生成的項目，但是代碼我們應該寫在那里以及項目的組成部分我們還是一概不知的，下面我們先來看看項目的目錄吧

flutter 的項目結(jié)構(gòu)

1、基本結(jié)構(gòu)

如果熟悉 ReactNative 的童鞋對這個目錄不會陌生，基本上來說就是 Android 和 IOS 來承載 flutter，一般情況下 Android 和 IOS 中的文件我們不會去動，除非要混合開發(fā)，而我們的 flutter 文件是在 lib 文件夾中的，并且入口文件是 main.dart，其它的沒什么好說的，不過要注意一點就是 pubspec.yaml 文件它是 flutter 的配置文件，類似于 Android 中的 gradle 和 Manifest 文件，具體后面會說

2、初識 main.dart 文件

此文件是 flutter 的入口文件，默認會給我們生成一個界面，也就是我們上節(jié)看到的界面，我們來看看里面有啥東東

默認的 main.dart 文件

我靠啥東東嗎「如果初學 flutter 看到這個東西會暈暈的」，在組件化流行之后「以 React/Vue 等為代表」，flutter 也不例外也是采用組件化「其實就是借鑒了 React，但是 Google 叫它為 Widget -- 小部件，就是一個組件，和 React/Vue 的 Component 是一個東東」，一個 flutter 項目就是由一個個 Widget 組成的「關(guān)于如何定義 Widget 后面章節(jié)說，不在本節(jié)范圍內(nèi)」

總之一句話，這個 main.dart 文件第一次看不懂，看不懂，那么我們就不看了「后面通過學習，自然懂了」，只需要知道這個貨就是 flutter 的入口文件即可

二、手寫 HelloWorld

1、命令式和聲明式

命令式和聲明式是兩種編程方式，我們來說說吧

命令式

命令式就是所有功能和屬性是通過指令來響應的，玩過 jquery「操作 DOM」 都知道基本上事件驅(qū)動的都是基于此種模式的，舉個例子吧，比如我們要取得輸入框的值，使用 js 來操作

// 取得 input 元素
var input = document.querySelector('input');
input.onChange = function () {
  var value = input.value;
  console.log(value)
}

就是發(fā)送一個消息告訴系統(tǒng)一步步如何去做

聲明式

比如 React/Vue 或者是 Android 中的布局 xml 文件都是聲明式的，它主要是告訴系統(tǒng)做什么，但是具體如何做是系統(tǒng)的事情，拿 Jquery 和 React/Vue 對比就非常清楚了，Jquery 通過命令式來操作 DOM 但是 React/Vue 把操作 DOM 屏蔽了，只要通過聲明來實想要的效果，使用 vue 實現(xiàn)上述效果

<div id="app">
  <input type="text" v-model="message">
</div>
<script>
    var app = new Vue({
      el: '#app',
      data: {
        message: ''
      },
      mounted(){
        alert(this.message)
      }
    })
</script>

flutter 屬于聲明式

我們在寫組件或界面的時候基本上都是給類似于 key:value 這種形式來指明我想的東西，至于東西雜樣出來底層幫你做了「你不用關(guān)心」

2、手寫 helloworld

看到上面的 main.dart 文件我們暈暈的，那就直接把它內(nèi)容刪掉，只保留第一行「import 語句」，一個最簡單的 flutter 應用只有一個 runApp 方法和一個組件，官網(wǎng)上說的很清楚，如下

最小的 flutter app

void main 就是程序的主入口，相當于 java 的 main 方法沒什么好說的，通過 runApp 來加載組件并且將其添加到屏幕上，這是比較簡單的 flutter 應用，但還不夠簡單，更簡單應該就是 runApp 直接來個 組件如：

import 'package:flutter/material.dart';

void main() {
  runApp(
     new Text(
       'Hello',
       // 文字方向，從左向右
       textDirection: TextDirection.ltr
     )
  );
}

沒啥說的看看效果吧，直接 flutter run 看效果

文件左對齊

看到了吧一個最簡單的 flutter 應用就出來了，顯示了一個 hello 但是位置被擋住了「沒關(guān)系我們調(diào)整即可」

這里 Text 就是一個組件，如果想讓 Hello 水平居中使用其 textAlign 屬性來選擇水平對齊方式，如果我們想讓 hello 在屏幕的中間，則需要給 Text 外面套一個組件 Center 或 Align 即可，我們套一個 Center 來試試

居中對齊

如果我們在命令行輸入 flutter run 運行起來以后，修改代碼直接使用 shift+r「即 R」就可以實現(xiàn)熱加載，不廢話看效果

文本居中

我們在 Text 外套了一個 Center 組件，然后我按了一個 R 所修改的效果就出來了「是不是感覺很爽」，有可能初次寫這些東西的時候不清楚是什么意思，沒關(guān)系我們說組件的時候會詳細的介紹，只需要知道 Center 是一個組件里面有一個 child 組件 Text

三、Flutter 組成

一個 flutter 應用是由各個組件組成的，面向?qū)ο笫且磺薪詫ο螅琑eact/Vue 一切皆組件，flutter 也是一切皆組件，提前說一下組件的組成方式，在 flutter 中通過組件嵌套的方式生成應用，這里就以上面的例子來說明吧

組件組成

此 demo 由一個 Center 組件和 Text 組件組成

demo 組件組成圖

這沒有什么好說的，當然這個 demo 太簡單，真實情況比這復雜多了，但是再復雜的 flutter 應用也是由一個個組件組成的，如圖所示

flutter 由一個個小部件組成

四、總結(jié)

• 1、了解 flutter 目錄結(jié)構(gòu)
• 2、手寫 hello world ，并且了解命令式編程和聲明式程序的區(qū)別
• 3、flutter 的組成以及組件化思想

本節(jié)和上一小節(jié)是一個預熱，下一小節(jié)我們說說 flutter 常用的組件，熟悉了這些組件「以及如何使用它們」我們就可以開干 flutter 應用的界面了

作者: TigerChain 訂閱查看更多內(nèi)容，公號「TigerChain」同步
本文出自 TigerChain 的 從頭開始整 Flutter