前言
本文適用於對Flutter 感興趣的初學者。筆者會帶大家寫一個簡單頁面，使大家對Flutter有一個簡單地瞭解。
一、Flutter 簡介
Flutter是Google的UI工具包，可使用一套程式碼庫，為移動，Web和桌面構建漂亮的原生編譯的應用程式。
Flutter實現了一個自繪引擎，使用自身的佈局、繪製系統，繪製介面。
1. Flutter 框架架構圖
Flutter框架圖簡單說明：
-
Framework層使用Dart實現，Material層 包含Android風格的Widget，Cupertino層 包含iOS風格的Widget，Widgets層包含Widget；Rendering層包含控制渲染的庫；Animation層包含動畫的庫；Painting層包含控制繪製的庫；Gestures層包含手勢的庫；Foundation層包含基礎庫（比如確定所屬平臺（Android、iOS等）的API、又如print、debug 相關的API）。 -
Engine層使用C++實現，Skia層是開源的二維圖形庫。Dart層包含Dart相關的API，Text層包含文字繪製展示相關的API。
在 Flutter 中我們所看到的內容都是由 Widget 控制顯示的，我們所看到的互動效果也是由 Widget 來控制的。在Flutter 中一切都是 Widget。
本文中，筆者會介紹的Widget有 StatelessWidget、 StatefulWidget 、 Text 、 Image 、 FlatButton 、 GestureDetector 、ListView 等。
2. 相關Widget介紹如下：
-
StatelessWidget是無狀態的Widget，當我們要展示的Widget不需要改變顯示內容的時候，使用StatelessWidget即可； -
StatefulWidget是有狀態的Widget，當我們要展示的Widget需要改變顯示內容的時候，需要使用StatefulWidget；StatefulWidget的子類相當於存放了State的配置資訊。StatefulWidget的介面顯示效果由State來控制展示。 當StatefulWidget對應的介面資料變化後，呼叫setState()方法，然後系統會執行buildContext()就可以做到更新介面的效果。 -
Column用於展示成列排列的 Widget； -
Container是一個容器Widget； -
Text用於展示文字，相當於iOS中的UILabel； -
Image用於展示圖片； -
FlatButton相當於iOS中的UIButton，用於處理互動事件，同時，Flutter中可以使用GestureDetector 對Widget 進行包裹，也可以達到具備互動的效果的目的； -
ListView相當於iOS中的UITableView，用於展示列表內容。 -
ListTile相當於iOS中的UITableViewCell。
三、使用Flutter建立一個簡單頁面
1. 頁面顯示Hello World
顯示 Hello World 需要使用 Text Widget
功能程式碼如下：
Text('Hello World'),
複製程式碼2. 建立 Flutter 應用方式
-
筆者使用的工具是 Visual Studio Code
-
開啟
Visual Studio Code後，command + shift + p，然後選擇建立Flutter New Project ，之後輸入小寫字母的專案名即可。 -
展示Hello World 的相關程式碼如下：
筆者已經按照自己的理解，加了部分註釋。
// 應用程式執行入口
void main(List<String> args) {
// 初始化指定的Widget，並把Widget渲染效果繪製到螢幕上
runApp(MaterialApp(
title: '安卓切換任務管理時任務名',
home: QiStatelessApp(),
));
}
複製程式碼// 建立一個繼承自Stateless的Widget
class QiStatelessApp extends StatelessWidget {
// 重寫build 方法，build 方法返回值為Widget型別，返回內容為螢幕上顯示內容。
@override
Widget build(BuildContext context) {
// MaterialApp 控制介面風格為安卓風格
// CupertinoApp 介面風格為iOS 風格
return MaterialApp(
title: '安卓切換任務管理時任務名',
// debugShowCheckedModeBanner: false,
// Scaffold：腳手架 用於展示基礎框架結構，如appBar、body、bottomNavigationBar
home: Scaffold(
// AppBar：相當於iOS 的導航欄
appBar: AppBar(
// AppBar上的顯示內容
// Text 用於展示文字內容，相當於iOS中的UILabel
title: Text('App Bar 展示內容'),
),
// body：AppBar及BottomNavigationBar之間展示的內容
// Center 是用於把子Widget 居中的Widget
body: Center(
child: Text('Hello World'),
),
// 相當於iOS 中的UITabBar
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(icon: Icon(Icons.work), title: Text('工作')),
BottomNavigationBarItem(
icon: Icon(Icons.security), title: Text('安全')),
],
onTap: (tappedIndex) {
print('tappedIndex：$tappedIndex');
},
),
),
);
}
}
複製程式碼上述程式碼整體效果圖如下：
下述程式碼中title傳入的值的作用為：在安卓手機上顯示出來工作管理員的時候，顯示為任務名。
runApp(MaterialApp(
title: '安卓切換任務管理時任務名',
home: QiStatelessApp(),
));
複製程式碼示意圖如下：
另外 MaterialApp 控制介面風格為安卓風格，CupertinoApp 介面風格為iOS 風格。
三、Flutter簡單頁面效果
在本文中，筆者將會做一個如下效果的Flutter 頁面。
四、上述頁面相關Widget介紹
下邊筆者依次介紹上述頁面用到的Widget。
(1) Text
Text('Hello World'),
複製程式碼Text 用於展示文字內容。
(2) Image
Image.network(
'https://upload.jianshu.io/collections/images/1673367/8.png?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240'),
複製程式碼Image 用於展示網路圖片
(3) FlatButton
FlatButton(
child: Text(
'FlatButton',
style: TextStyle(
backgroundColor: Colors.yellow,
),
),
onPressed: () {
print('press FlatButton');
setState(() {
_centerString = 'Change Self';
});
},
),
複製程式碼FlatButton 可以顯示內容也可以接受互動。
(4) GestureDetector
GestureDetector(
child: Text(
'GestureDetector',
style:
TextStyle(color: Colors.red, backgroundColor: Colors.yellow),
),
onTap: () {
print('GestureDetector');
},
),
複製程式碼GestureDetector 可以達到包裹內容並接受互動的目的。
(5)Column
Column(
children: <Widget>[
Text('Hello World'),
Icon(Icons.share),
FlatButton(
child: Text('FlatButton'),
onPressed: (){
print('press FlatButton');
},
),
],
),
複製程式碼Column 用於列排展示 children 內容。
(6)ListView
ListView 相當於列表。使用 ListTile 來展示列表內容。
ListView(
children: <Widget>[
ListTile(
title: Text('姓名'),
trailing: Text('FlutterDev'),
),
ListTile(
title: Text('性別'),
trailing: Text('男'),
),
ListTile(
title: Text('地區'),
trailing: Text('河北'),
),
ListTile(
title: Text('手機'),
trailing: Text('176*****9396'),
),
ListTile(
title: Text('其他'),
subtitle: Text('subtile'),
leading: Icon(Icons.security),
trailing: Icon(Icons.share),
onTap: () {
print('ListTile1');
},
),
],
),
複製程式碼(7) ListTile
ListTile 是列表中的條目。
// 列表條目
ListTile(
// 標題
title: Text('ListTile1'),
// 子標題
subtitle: Text('subtile1'),
// 標題左側的Widget
leading: Icon(Icons.security),
// 標題右側的Widget
trailing: Icon(Icons.share),
onTap: () {
print('ListTile1');
},
),
複製程式碼五、頁面跳轉及回傳資料
頁面跳轉並傳值可以通過構造方法傳值。
Navigator.push(context,
MaterialPageRoute(builder: (context) {
return QiListViewPage('iOS Dev');
})).then((onValue) {
print('回傳的資料：$onValue');
});
複製程式碼回傳資料。
Navigator.pop(context, 'FlutterDev');
複製程式碼六、相關程式碼
import 'package:flutter/material.dart';
// 應用程式執行入口
void main(List<String> args) {
// 初始化指定的Widget，並把Widget渲染效果繪製到螢幕上
// MaterialApp 控制介面風格為安卓風格
// CupertinoApp 介面風格為iOS 風格
// runApp(MaterialApp(
// title: '安卓切換任務管理時任務名',
// home: QiStatelessApp(),
// ));
runApp(MaterialApp(
title: '安卓切換任務管理時任務名',
home: QiStatefulApp(),
));
}
複製程式碼// QiStatefulApp 是有狀態的Widget
class QiStatefulApp extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return QiState();
}
}
複製程式碼QiState負責渲染QiStatefulApp要顯示的內容
class QiState extends State<QiStatefulApp> {
@override
Widget build(BuildContext context) {
......
);
}
}
複製程式碼更多程式碼見Demo：QiFlutterPage
七、參考學習資料
小編微信：可加並拉入《QiShare技術交流群》。
關注我們的途徑有：
QiShare(簡書)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公眾號)
推薦文章：
5分鐘，帶你迅速上手Markdown語法
Swift 5.1 (2) - 運算子
Swift 5.1(1) - 基礎
iOS UI狀態儲存和恢復（三）
iOS UI狀態儲存和恢復（二）
iOS UI狀態儲存和恢復（一）
iOS 中精確定時的常用方法
Sign In With Apple（一）
奇舞週刊