Flutter 即學即用系列博客——04 Flutter UI 初窺

前面三篇能夠算是一個小小的里程碑。

主要是介紹了 Flutter 環境的搭建、如何建立 Flutter 項目以及如何在舊有 Android 項目引入 Flutter。

這一篇咱們來學習下 Flutter 的 UI。

前言

說到 UI，我就簡單說下 Flutter 做爲一門跨平臺語言具備的優點之一，提升效率吧。

舉個例子：

假設如今要開發一個界面，Android 開發須要一天，iOS 開發也須要一天。那麼就是兩天。

若是你用 Flutter 開發，就只須要一天（由於 Android 和 iOS 均可以共用一套 Flutter 代碼）。這樣效率天然就提升了。

另外，假設後面產品發現界面有個位置須要調整，若是是 Android 或者 iOS 單獨開發，則兩個端都須要進行額外調整。

而 Flutter 就一套代碼而已，因此相較之下 Flutter 更易維護。

官網關於 UI 的介紹 User interface

這邊筆者按照本身的感覺和認識進行說明。

讀者看完以後有了個基本的認識，後續不論是閱讀官方文檔仍是使用搜索引擎搜索相關問題，相信會事半功倍。

記住一句話：

Flutter 裏面一切皆 Widget。

目錄

1. 基本配置

咱們緊接以前文章，如今進入 MyApp/sub/my_flutter 位置。

打開 main.dart。若是提示下圖：

Dart support is not enabled for the project

咱們點擊右邊第一個（Enabled Dart support）或者第二個（Open Dart settings）都是 OK 的。

若是點擊第二個，須要配置 dart 的目錄。

dart 的目錄在 flutter 的 bin 目錄下面的 cache 目錄下面。

舉個例子，筆者的 flutter bin 目錄(terminal 執行which flutter)爲/Users/nesger/Desktop/nesger_folder/flutter/flutter/bin/，那麼 dart 目錄就在/Users/nesger/Desktop/nesger_folder/flutter/flutter/bin/cache/dart-sdk。

而後直接拷貝下面代碼替換 main.dart 的代碼。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('My Flutter'),
          ),
          body: Center(),
        )
    );
  }
}

實際編譯器可能會顯示以下圖，就是會有註釋顯示每一個控件。

這有好處也有壞處。好處就是你能夠看到哪一塊是哪個 Widget。壞處就是視覺干擾。

這個是自動產生的，不可刪除。

能夠經過以下操做控制是否顯示：

Android Studio->Preferences->Editor->General->Appearance

2. main.dart 學習

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('My Flutter'),
          ),
          body: Center(),
        )
    );
  }
}

執行 flutter run 運行後能夠看到下圖：

對比上面代碼可看到頂部藍色區域是 AppBar 這個 Widget 來控制的。

你能夠自行修改 Text 裏面的內容而後按 r 鍵經過熱重載看下效果。

咱們能夠看到，Flutter 裏面的 dart 代碼一個比較明顯的地方就是一個 Widget 套着一個 Widget，有點樹形的樣子。

好比這裏

咱們嘗試把 AppBar 去掉，能夠看到界面顯示就是一片純白的界面。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          body: Center(),
        )
    );
  }
}

那麼這裏的 MaterialApp Widget 是否是必需的呢？

其實 MaterialApp 說明這個界面是按照 Material Design 的風格。

咱們看下若是去掉會怎樣？

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(),
    );
  }
}

因此說 Scaffold 這個 Widget 不能直接返回，咱們須要給它外面套一層 MaterialApp。

能夠看下這個連接：https://github.com/nesger/FlutterNote/issues/4

咱們返回以前的狀態，而後給他加一個 Hello World，看下怎樣？

咱們知道，Flutter 一切皆 Widget，因此須要顯示 Hello World，就須要 Widget。

Widget 能夠經過這個連接查看：https://flutter.io/docs/development/ui/widgets

能夠看到 Text 這個 Widget

點擊進入

再點擊進入，能夠看到介紹以及 Sample。

你們之後若是要看其餘 Widget 也能夠按照一樣的方式學習。

固然若是時間要求比較緊的話，你們學完博客能夠直接在搜索引擎輸入關鍵字看下別人的 Sample，而後化用一下就沒問題啦。

咱們點擊右邊複製，而後簡單修改以下：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
            child: Text(
              'Hello World!',
              textAlign: TextAlign.center,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
        ),
      ),
    );
  }
}

能夠看到咱們將其放到 Center 這個 Widget 裏面，表示居中，同時做爲它的一個 child。

你們能夠試下去掉 Center 會怎樣，直接將 Text 做爲 body，以下：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Text(
          'Hello World!',
          textAlign: TextAlign.center,
          overflow: TextOverflow.ellipsis,
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}

能夠想象應該是不居中的。

到了這裏你應該能夠發現，咱們整個頁面實際上是 body 對應的 Widget 來控制的。

上面咱們的例子都是 MaterialApp，是否是必定只能這個 Widget 在最外層？

不是的，只是這裏 Scaffold 跟它配對而已，咱們能夠修改以下：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
        textAlign: TextAlign.center,
        overflow: TextOverflow.ellipsis,
        style: TextStyle(fontWeight: FontWeight.bold),
      ),
    );
  }
}

注意多了一行textDirection: TextDirection.ltr,沒有會報錯。

3. 以 Text 爲例子初窺 Widget 寫法

咱們點進去 Text 源碼看下，

對比一下上面咱們的代碼：

Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
        textAlign: TextAlign.center,
        overflow: TextOverflow.ellipsis,
        style: TextStyle(fontWeight: FontWeight.bold),
      )

咱們能夠這樣認爲，括號裏面的是待傳入參數。其中沒有花括號{}包裹的是必填項，有花括號{}的是選填項。

有花括號{}的在傳入參數時須要指定參數，格式爲參數:值。不一樣參數之間逗號分隔。

因此咱們能夠猜想上面 Center 下面的 child 應該是在花括號裏面。因此纔會有上面的寫法，咱們跟進去源碼看看。

確實跟咱們猜的同樣。並且因爲參數的類型是 Widget，因此能夠傳 Text 也是沒問題的。

因此到這裏你再回顧一下上面是否是就知道上面代碼的寫法了呢？

總結

因爲 Flutter UI 內容比較多，講起來篇幅會比較大。

因此咱們會拆分紅幾篇文章進行講解。

回顧一下，本篇文章主要講解以下內容：

1. dart sdk 配置和 dart 源代碼括號後面編譯器提示的顯示和隱藏。
2. 經過 main.dart 的修改初步熟悉 Flutter 界面的寫法。
3. 經過 Text 說明如何在官方文檔上面查找控件和對應 Sample。
4. 經過一個具體的小控件 Text 初窺 Flutter Widget 的寫法和使用方法。

小彩蛋

這個彩蛋是微信羣裏一個小夥伴說到的。這裏分享給你們。

簡單說就是設置 Android Studio 的背景圖。

先上圖

你們以爲哪一種更加賞心悅目呢？

能夠根據本身的喜愛肯定是否設置。

設置方法爲

其中 Opacity 是不透明度。

0 表示徹底透明，跟沒設置同樣。100 表示徹底不透明。

通常默認便可。

背景圖公衆號回覆「ASBG」獲取。

更多閱讀：
Flutter 即學即用系列博客——01 環境搭建
Flutter 即學即用系列博客——02 一個純 Flutter Demo 說明
Flutter 即學即用系列博客——03 在舊有項目引入 Flutter