該文已授權(quán)公眾號 「碼個蛋」，轉(zhuǎn)載請指明出處

上一節(jié)介紹了 Dart 的一些語法，以及配置環(huán)境的網(wǎng)址唐断，這節(jié)我們就可以開始了解下 Flutter 了

主要包括 MaterialApp、Scaffold、Text离咐、Image、Icon奉件、Button 以及 AppBar 部分內(nèi)容宵蛀，準(zhǔn)備出發(fā)~

Flutter runApp

新建 flutter 項(xiàng)目后，可以看到 lib 下的 main.dart 中 void main() => runApp(MyApp()); 這句就是程序的入口了县貌。這里可以簡單看下源碼

void runApp(Widget app) {
  WidgetsFlutterBinding.ensureInitialized()
    ..attachRootWidget(app)
    ..scheduleWarmUpFrame();
}

///....
static WidgetsBinding ensureInitialized() {
  if (WidgetsBinding.instance == null)
    WidgetsFlutterBinding();
  return WidgetsBinding.instance;
}

///....
void attachRootWidget(Widget rootWidget) {
  _renderViewElement = RenderObjectToWidgetAdapter<RenderBox>(
    container: renderView,
    debugShortDescription: '[root]',
    child: rootWidget
  ).attachToRenderTree(buildOwner, renderViewElement);
}

首先會創(chuàng)建一個 WidgetsBinding 單例對象术陶，然后把傳入的 App 添加到 rootWidget 中，scheduleWarmUpFrame 方法比較長煤痕，這邊看下對該方法的注釋第一句就能了解方法的主要功能了

Schedule a frame to run as soon as possible

「安排框架盡快運(yùn)行起來」(原諒我這渣英語梧宫，只能看懂不會翻譯..大概就是「快速啟動框架」的意思吧)

Flutter App

接著看下 MyApp 這個類，繼承自 StatelessWidget 并在 build 方法返回一個 MaterialApp 實(shí)例杭攻，(偷偷講下祟敛，其實(shí)這邊還可以返回 CupertinoApp疤坝，這是一個 iOS 風(fēng)格的 widget兆解，基本上你看到部件帶 「Cupertino」的都是 iOS 風(fēng)格的 widget，這里先不講 iOS 風(fēng)格的部件跑揉，目前 flutter 對 Cupertino 系列的 widget 支持不是很好锅睛，包括部件的廣度，多語言的支持等等方面都不是很友好历谍，所以我們還是繼續(xù)看 MD 風(fēng)格的 Android 部件吧~)现拒，這里先看下 MaterialApp 的構(gòu)造函數(shù)，介紹一些常用的參數(shù)

const MaterialApp({
    Key key,
    this.navigatorKey,
    this.home, // 主界面的內(nèi)容 widget
    this.routes = const <String, WidgetBuilder>{}, // 帶 router 和路由跳轉(zhuǎn)有關(guān)
    this.initialRoute,
    this.onGenerateRoute,
    this.onUnknownRoute,
    this.navigatorObservers = const <NavigatorObserver>[], 
    this.builder,
    this.title = '', // *類似標(biāo)題
    this.onGenerateTitle, // 主要用于多語言情況下望侈，需要根據(jù)當(dāng)前語言替換 title印蔬，需要使用該值
    this.color, // 主題色，如果該值未設(shè)置脱衙，取 theme.primaryColor,未設(shè)置 theme 則取藍(lán)色
    this.theme, // App 的主題風(fēng)格侥猬，包括主題色，按鈕默認(rèn)顏色等等
    this.locale, // 帶 locale 的和多語言適配相關(guān)
    this.localizationsDelegates,
    this.localeListResolutionCallback,
    this.localeResolutionCallback,
    this.supportedLocales = const <Locale>[Locale('en', 'US')],
    this.debugShowMaterialGrid = false, 
    this.showPerformanceOverlay = false,
    this.checkerboardRasterCacheImages = false,
    this.checkerboardOffscreenLayers = false,
    this.showSemanticsDebugger = false,
    this.debugShowCheckedModeBanner = true, // debug 模式下捐韩，是否顯示 DEBUG 標(biāo)示橫幅
  })

MaterialApp 繼承自 StatefulWidget退唠，它和 MyApp 所繼承的類 StatelessWidget，就是日常開發(fā)中荤胁，自定義部件通常繼承的抽象類了瞧预。

1. StatelessWidget 是狀態(tài)不可變部件，通過其構(gòu)建的部件一般用來展示固定內(nèi)容，例如需要展示固定的功能按鈕列表垢油，不需要根據(jù)不同界面狀態(tài)進(jìn)行修改其展示內(nèi)容
2. StatefulWidget 是可改變狀態(tài)的部件盆驹，比如我們需要通過網(wǎng)絡(luò)或者數(shù)據(jù)庫獲取數(shù)據(jù)，然后修改部件鎖展示的數(shù)據(jù)內(nèi)容秸苗，則需要通過 StatefulWidget 來構(gòu)建召娜。當(dāng)然，不是說 StatelessWidget 不能實(shí)現(xiàn)修改界面數(shù)據(jù)的功能惊楼，這就需要涉及到 狀態(tài)管理 的概念了玖瘸，后面有機(jī)會再講，這邊先埋坑【坑1】

Flutter Scaffold

進(jìn)入 App 后就需要構(gòu)建界面了檀咙，Flutter 提供了 Scaffold 來快速構(gòu)建一個 MaterialDesign 風(fēng)格的界面雅倒，還是先看下 Scaffold 的構(gòu)造函數(shù)吧，了解幾個比較常用的部分弧可。

const Scaffold({
    Key key,
    this.appBar, // 界面頂部的那條欄蔑匣，這邊需要返回一個 AppBar 實(shí)例
    this.body, // 界面的內(nèi)容部分
    this.floatingActionButton, // 懸浮部分，可以通過 floatingActionButtonLocation 設(shè)置位置
    this.floatingActionButtonLocation,
    this.floatingActionButtonAnimator,
    this.persistentFooterButtons,
    this.drawer, // 側(cè)滑抽屜部分棕诵，從左側(cè)滑出(應(yīng)該和語言有關(guān)裁良，和文字方向同向)
    this.endDrawer, // 側(cè)滑抽屜部分，從右側(cè)滑出
    this.bottomNavigationBar, // 底部導(dǎo)航欄校套，就是通臣燮ⅲ看到的底部 TAB 切換部件
    this.bottomSheet, // 展示從底部彈出的，起到提示作用的笛匙，通過 showModalBottomSheet 展示
    this.backgroundColor, // 界面的背景色
    this.resizeToAvoidBottomPadding = true, // 避免 body 被底部彈出部件填充侨把，例如輸入法鍵盤
    this.primary = true, // 當(dāng)前的 Scaffold 是否需要被展示在屏幕最上層
  })

來張圖吧，簡潔明了

scaffold分布.png

了解完 Scaffold 的整體構(gòu)造后妹孙，我們從上到下秋柄，通過構(gòu)造函數(shù)來了解下各個 Widget 的使用方法

AppBar

AppBar({
    Key key,
    this.leading, // 用于設(shè)置 AppBar 前置的按鈕，例如設(shè)置返回我們需要的返回按鈕等
    this.automaticallyImplyLeading = true, // 是否使用系統(tǒng)默認(rèn)生成的按鈕蠢正，如果替換 leading 的默認(rèn)按鈕骇笔，最好將該屬性設(shè)置成 false
    this.title, // AppBar 所需要展示的組件，傳入一個 Widget 實(shí)例嚣崭，通常使用 Text 展示一個標(biāo)題
    this.actions, // AppBar 末尾懸浮的一些操作組件笨触，例如常見的會在末尾設(shè)置一個「...」按鈕，點(diǎn)擊彈出一個 menue 提供給用戶操作選擇
    this.flexibleSpace, // AppBar 的背景有鹿，可以設(shè)置顏色旭旭，背景圖等等 
    this.bottom, // bottom 用于展示頂部導(dǎo)航 TAB
    this.elevation = 4.0,
    this.backgroundColor, // AppBar 的背景色，如果只需要修改顏色葱跋，可以不通過 flexibleSpace 修改
    this.brightness,
    this.iconTheme, // 按鈕的默認(rèn)樣式
    this.textTheme, // 文字的默認(rèn)樣式
    this.primary = true,
    this.centerTitle, // 是否將展示的 title 居中
    this.titleSpacing = NavigationToolbar.kMiddleSpacing, // AppBar title 兩側(cè)的空白間隔
    this.toolbarOpacity = 1.0,
    this.bottomOpacity = 1.0,
  })

在展示 AppBar 的 demo 之前持寄，我們先學(xué)習(xí)幾個基本的組件 Text源梭、Image、Icon稍味、Button 分布用于展示文字废麻，圖片，圖標(biāo)模庐，按鈕

Text

const Text(this.data, { // Text 需要展示的文字
    Key key,
    this.style, // 文字的樣式烛愧，包括顏色，大小掂碱，間距等等屬性怜姿，這邊就不繼續(xù)展示 TextStyle 構(gòu)造函數(shù)了，不然我怕大家都不想繼續(xù)看了疼燥，稍后通過例子來說明
    this.textAlign, // 文字的對齊方式沧卢，包括左對齊，右對齊醉者，居中等但狭，詳見 TextAlign 類
    this.textDirection, // 文字方向，ltr(left to right) 或者 rtl(right to left)
    this.locale, 
    this.softWrap, // 當(dāng)文字一行顯示不完是否換行
    this.overflow, // 如果超出限制的行數(shù)撬即，以哪種方式省略未展示的內(nèi)容
    this.textScaleFactor, // 文字縮放比例
    this.maxLines, // 最多展示的行數(shù)
    this.semanticsLabel,
  })

說了那么多立磁，相信很多小伙伴都要急著擼代碼了吧，接著來展示一些 Text 的示例剥槐，接下來的例子都會直接替換 HomePage 內(nèi)的展示內(nèi)容唱歧，其余都是相同的，接下來請關(guān)注 Text 別的部件先忽略才沧，后面會介紹迈喉，這邊先埋坑【坑2】

import 'package:flutter/material.dart';

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

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.lightBlue),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: Container(
          padding: const EdgeInsets.only(top: 10.0),
          child: Center(
              child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('綠色背景黑色文字展示',
                  style: TextStyle(
                      color: Colors.black, // 設(shè)置文字顏色绍刮，不可和 foreground 同時設(shè)置
                      fontSize: 24.0, // 字體大小
                      letterSpacing: 2.0, // 每個字符之間的間隔
                      background: Paint()..color = Colors.green)), // 背景色
              Text('這是一個帶紅色下劃線的文字展示',
                  style: TextStyle(
                      color: Colors.black,
                      fontSize: 24.0,
                      // 文字裝飾線温圆，除了 underline 還有 overline, lineThrough，
                      // 不同的樣式小伙伴可以通過自己修改代碼來查看
                      decoration: TextDecoration.underline,
                      // 文字裝飾線的類型孩革，除了 solid 還有 double,dotted,dashed,wavy 可選
                      decorationStyle: TextDecorationStyle.solid,
                      // 裝飾線的顏色
                      decorationColor: Colors.red))
            ],
          )),
        ));
  }
}

該部分代碼查看源碼 text_main.dart 文件

最后的展示效果如下圖：

text 展示.png

Image

/壞笑 按照慣例岁歉，我們還是先看下 Image 的構(gòu)造函數(shù)吧

const Image({
    Key key,
    // 一個 ImageProvider 實(shí)例，但是 ImageProvider 是一個抽象類膝蜈，F(xiàn)lutter 已經(jīng)給我們提供如下
    // AssetImage锅移，NetworkImage，F(xiàn)ileImage饱搏，MemoryImage 這四種圖片加載器非剃，為了方便調(diào)用
    // 我們可以直接通過 Image.asset, Image.network, Image.file, Image.memory 簡化，
    // 通過方法名推沸，可以看出分別從 asset 文件备绽，網(wǎng)絡(luò)券坞，文件，內(nèi)存中加載圖片
    @required this.image, 
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width, // 圖片寬度
    this.height, // 圖片高度
    this.color, // 圖片背景色
    this.colorBlendMode, // color 和圖片的混合模式(這個值比較多肺素，可以一個個嘗試)
    this.fit, // 圖片填充方式 fill, cover, contain, fillWidth, fillHeight, scaleDown, none
    this.alignment = Alignment.center, // 對齊方式
    this.repeat = ImageRepeat.noRepeat, // 若未填充滿空間恨锚，重復(fù)展示的方式
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.filterQuality = FilterQuality.low,
  })

好了好了，我知道你們又想自己寫代碼嘗試下了倍靡，在這之前猴伶，需要你先準(zhǔn)備一張本地圖片，然后在項(xiàng)目的根目錄塌西，也就是 lib 文件夾同層他挎，創(chuàng)建一個新的文件夾，命名為 images捡需，把你準(zhǔn)備好的圖片放到這個目錄下雇盖。放好之后打開 pubspec.yaml 把圖片資源文件注冊下

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # 這邊注冊資源文件，以后有圖片文件也可以只注冊 images 文件夾栖忠，會自動讀取內(nèi)部的文件
  assets:
    - images/ali.jpg

注冊完成后崔挖，就可以繼續(xù)愉快的擼代碼了~

class HomePage extends StatelessWidget {
  final String _assetAli = 'images/ali.jpg';
  final String _picUrl =
      'https://timg05.bdimg.com/timg?wapbaike&quality=60&size=b1440_952&cut_x=143&cut_y=0&cut_w=1633&'
      'cut_h=1080&sec=1349839550&di=cbbc175a45ccec5482ce2cff09a3ae34&'
      'src=http://imgsrc.baidu.com/baike/pic/item/4afbfbedab64034f104872baa7c379310b551d80.jpg';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: Container(
          padding: const EdgeInsets.only(top: 10.0),
          child: Center(
              child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // 這種展示圖片方式和下一種會有相同的效果
              Image(image: AssetImage(_assetAli), width: 80.0, height: 80.0),
              // 接下來加載圖片都會使用這些比較方便的方法
              Image.asset(_assetAli, width: 80.0, height: 80.0),
              // 加載一張網(wǎng)絡(luò)圖片
              Image.network(_picUrl,
                  height: 80.0,
                  // 橫向重復(fù)
                  repeat: ImageRepeat.repeatX,
                  // MediaQuery.of(context).size 獲取到的為上層容器的寬高
                  width: MediaQuery.of(context).size.width),
              // 通過設(shè)置混合模式，可以看到圖片展示的樣式已經(jīng)修改
              Image.asset(_assetAli,
                  width: 80.0, height: 80.0, color: Colors.green, colorBlendMode: BlendMode.colorDodge),
              // 會優(yōu)先加載指定的 asset 圖片庵寞，然后等網(wǎng)絡(luò)圖片讀取成功后加載網(wǎng)絡(luò)圖片狸相，會通過漸隱漸現(xiàn)方式展現(xiàn)
              // cover 方式按照較小的邊布滿，較大的給切割
              // contain 會按照最大的邊布滿捐川，較小的會被留白
              // fill 會把較大的一邊壓縮
              // fitHeight, fitWidth 分別按照長寬來布滿
              FadeInImage.assetNetwork(
                  placeholder: _assetAli, image: _picUrl, width: 120.0, height: 120.0, fit: BoxFit.cover),
              // Icon 相對屬性少了很多脓鹃，需要傳入一個 IconData 實(shí)例，flutter 提供了很多圖標(biāo)古沥，
              // 但是實(shí)際情況我們需要加入我們自己的圖標(biāo)瘸右，這邊再埋坑【坑3】
              // size 為圖標(biāo)顯示的大小，color 為圖標(biāo)的顏色岩齿，這邊通過 Theme 獲取主題色調(diào)
              Icon(Icons.android, size: 40.0, color: Theme.of(context).primaryColorDark)
            ],
          )),
        ));
  }
}

該部分代碼查看源碼 image_main.dart 文件

最后的效果如下：

Image 展示.png

Button

Flutter 提供了各種類型的 Button 幾乎是大同小異的太颤，這邊就抽取一些比較常用的展示下效果，常用的主要有 RaisedButton 盹沈、FlatButton龄章、IconButton、OutlineButton乞封、MaterialButton做裙、FloatActionButton、FloatingActionButton.extended

Button 都有一個 onPress 參數(shù)肃晚，是 VoidCallback 類型的參數(shù)锚贱，通過查看源碼可以知道 VoidCallback 是無參無返回值的一種類型參數(shù)。如果該參數(shù)傳入的值為 null 那么這個按鈕的就不可點(diǎn)擊狀態(tài)关串，無點(diǎn)擊效果拧廊，等會可以在例子中查看杂穷。還有就是 child 參數(shù)，這里就是傳入你需要展示的內(nèi)容卦绣，比如 Text耐量、Icon 等等。別的參數(shù)基本可以通過參數(shù)名了解滤港，這邊不擴(kuò)展了(再看源碼我怕你們都不想繼續(xù)看下去了...)

Talk is cheap, show me the code

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        padding: const EdgeInsets.only(top: 10.0),
        child: Center(
            child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              onPressed: () {
                print('This is a Rased Button can be clicked');
              },
              child: Text('Raised Enable'),
            ),
            RaisedButton(onPressed: null, child: Text('Raised Disable')),
            FlatButton(
              onPressed: () => print('This is a Flat Button can be clicker'),
              child: Text('Flat Enable'),
            ),
            FlatButton(onPressed: null, child: Text('Flat Disable')),
            IconButton(icon: Icon(Icons.android), onPressed: () {}),
            IconButton(icon: Icon(Icons.android), onPressed: null),
            MaterialButton(onPressed: () {}, child: Text('Material Enable')),
            MaterialButton(onPressed: null, child: Text('Material Disable')),
            OutlineButton(onPressed: () {}, child: Text('Outline Enable')),
            OutlineButton(onPressed: null, child: Text('Outline Enable')),
          ],
        )),
      ),
      floatingActionButton:
          FloatingActionButton.extended(onPressed: () {}, icon: Icon(Icons.android), label: Text('Android')),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }
}

該部分代碼查看源碼 button_main.dart 部分

最終的效果圖：

button 展示.png

這篇終于到末尾了廊蜒，最后留了 3 個坑等以后解決

最后代碼的地址還是要的：

1. 文章中涉及的代碼：demos

2. 基于郭神 cool weather 接口的一個項(xiàng)目，實(shí)現(xiàn) BLoC 模式溅漾，實(shí)現(xiàn)狀態(tài)管理：flutter_weather

3. 一個課程(當(dāng)時買了想看下代碼規(guī)范的山叮，代碼更新會比較慢，雖然是跟著課上的一些寫代碼添履，但是還是做了自己的修改屁倔，很多地方看著不舒服，然后就改成自己的實(shí)現(xiàn)方式了)：flutter_shop

如果對你有幫助的話暮胧，記得給個 Star锐借，先謝過，你的認(rèn)可就是支持我繼續(xù)寫下去的動力~