級(jí)別： ★☆☆☆☆
標(biāo)簽：「Flutter」
作者： WYW
審校： QiShare團(tuán)隊(duì)
前言
本文適用于對(duì)Flutter 感興趣的初學(xué)者整份。筆者會(huì)帶大家寫一個(gè)簡(jiǎn)單頁(yè)面轧邪，使大家對(duì)Flutter有一個(gè)簡(jiǎn)單地了解拖吼。
一鼻疮、Flutter 簡(jiǎn)介
Flutter是Google的UI工具包假勿，可使用一套代碼庫(kù)借嗽，為移動(dòng)潮尝，Web和桌面構(gòu)建漂亮的原生編譯的應(yīng)用程序七咧。
Flutter實(shí)現(xiàn)了一個(gè)自繪引擎孝鹊，使用自身的布局搜立、繪制系統(tǒng)，繪制界面简十。
1. Flutter 框架架構(gòu)圖
Flutter框架圖簡(jiǎn)單說(shuō)明：
Framework層使用Dart實(shí)現(xiàn)香璃，Material層 包含Android風(fēng)格的Widget迹炼，Cupertino層 包含iOS風(fēng)格的Widget删窒，Widgets層包含Widget裂垦；Rendering層包含控制渲染的庫(kù)；Animation層包含動(dòng)畫的庫(kù)肌索；Painting層包含控制繪制的庫(kù)蕉拢；Gestures層包含手勢(shì)的庫(kù)；Foundation層包含基礎(chǔ)庫(kù)（比如確定所屬平臺(tái)（Android诚亚、iOS等）的API晕换、又如print、debug 相關(guān)的API）亡电。Engine層使用C++實(shí)現(xiàn)届巩，Skia層是開(kāi)源的二維圖形庫(kù)硅瞧。Dart層包含Dart相關(guān)的API份乒，Text層包含文字繪制展示相關(guān)的API。
在 Flutter 中我們所看到的內(nèi)容都是由 Widget 控制顯示的，我們所看到的交互效果也是由 Widget 來(lái)控制的或辖。在Flutter 中一切都是 Widget瘾英。
本文中，筆者會(huì)介紹的Widget有 StatelessWidget颂暇、 StatefulWidget 缺谴、 Text 、 Image 耳鸯、 FlatButton 湿蛔、 GestureDetector 、ListView 等县爬。
2. 相關(guān)Widget介紹如下：
StatelessWidget是無(wú)狀態(tài)的Widget阳啥，當(dāng)我們要展示的Widget不需要改變顯示內(nèi)容的時(shí)候，使用StatelessWidget即可财喳；StatefulWidget是有狀態(tài)的Widget察迟，當(dāng)我們要展示的Widget需要改變顯示內(nèi)容的時(shí)候，需要使用StatefulWidget耳高；StatefulWidget的子類相當(dāng)于存放了State的配置信息扎瓶。StatefulWidget的界面顯示效果由State來(lái)控制展示。 當(dāng)StatefulWidget對(duì)應(yīng)的界面數(shù)據(jù)變化后泌枪，調(diào)用setState()方法概荷，然后系統(tǒng)會(huì)運(yùn)行buildContext()就可以做到更新界面的效果。Column用于展示成列排列的 Widget碌燕；Container是一個(gè)容器Widget乍赫；Text用于展示文字，相當(dāng)于iOS中的UILabel陆蟆；Image用于展示圖片雷厂；FlatButton相當(dāng)于iOS中的UIButton，用于處理交互事件叠殷，同時(shí)改鲫，F(xiàn)lutter中可以使用GestureDetector 對(duì)Widget 進(jìn)行包裹，也可以達(dá)到具備交互的效果的目的林束；ListView相當(dāng)于iOS中的UITableView像棘，用于展示列表內(nèi)容。ListTile相當(dāng)于iOS中的UITableViewCell壶冒。
三缕题、使用Flutter創(chuàng)建一個(gè)簡(jiǎn)單頁(yè)面
1. 頁(yè)面顯示Hello World
顯示 Hello World 需要使用 Text Widget
功能代碼如下：
Text('Hello World'),
2. 創(chuàng)建 Flutter 應(yīng)用方式
筆者使用的工具是Visual Studio Code
打開(kāi)
Visual Studio Code后，command + shift + p胖腾，然后選擇創(chuàng)建Flutter New Project 烟零，之后輸入小寫字母的項(xiàng)目名即可瘪松。
- 展示Hello World 的相關(guān)代碼如下：
筆者已經(jīng)按照自己的理解，加了部分注釋锨阿。
// 應(yīng)用程序執(zhí)行入口
void main(List<String> args) {
// 初始化指定的Widget宵睦，并把Widget渲染效果繪制到屏幕上
runApp(MaterialApp(
title: '安卓切換任務(wù)管理時(shí)任務(wù)名',
home: QiStatelessApp(),
));
}
// 創(chuàng)建一個(gè)繼承自Stateless的Widget
class QiStatelessApp extends StatelessWidget {
// 重寫build 方法，build 方法返回值為Widget類型墅诡，返回內(nèi)容為屏幕上顯示內(nèi)容壳嚎。
@override
Widget build(BuildContext context) {
// MaterialApp 控制界面風(fēng)格為安卓風(fēng)格
// CupertinoApp 界面風(fēng)格為iOS 風(fēng)格
return MaterialApp(
title: '安卓切換任務(wù)管理時(shí)任務(wù)名',
// debugShowCheckedModeBanner: false,
// Scaffold：腳手架 用于展示基礎(chǔ)框架結(jié)構(gòu)，如appBar末早、body烟馅、bottomNavigationBar
home: Scaffold(
// AppBar：相當(dāng)于iOS 的導(dǎo)航欄
appBar: AppBar(
// AppBar上的顯示內(nèi)容
// Text 用于展示文本內(nèi)容，相當(dāng)于iOS中的UILabel
title: Text('App Bar 展示內(nèi)容'),
),
// body：AppBar及BottomNavigationBar之間展示的內(nèi)容
// Center 是用于把子Widget 居中的Widget
body: Center(
child: Text('Hello World'),
),
// 相當(dāng)于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傳入的值的作用為：在安卓手機(jī)上顯示出來(lái)任務(wù)管理器的時(shí)候然磷，顯示為任務(wù)名焙糟。
runApp(MaterialApp(
title: '安卓切換任務(wù)管理時(shí)任務(wù)名',
home: QiStatelessApp(),
));
示意圖如下：
另外 MaterialApp 控制界面風(fēng)格為安卓風(fēng)格，CupertinoApp 界面風(fēng)格為iOS 風(fēng)格样屠。
三穿撮、Flutter簡(jiǎn)單頁(yè)面效果
在本文中，筆者將會(huì)做一個(gè)如下效果的Flutter 頁(yè)面痪欲。
四悦穿、上述頁(yè)面相關(guān)Widget介紹
下邊筆者依次介紹上述頁(yè)面用到的Widget。
(1) Text
Text('Hello World'),
Text 用于展示文字內(nèi)容业踢。
(2) Image
Image.network(
'https://upload.jianshu.io/collections/images/1673367/8.png?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240'),
Image 用于展示網(wǎng)絡(luò)圖片
(3) FlatButton
FlatButton(
child: Text(
'FlatButton',
style: TextStyle(
backgroundColor: Colors.yellow,
),
),
onPressed: () {
print('press FlatButton');
setState(() {
_centerString = 'Change Self';
});
},
),
FlatButton 可以顯示內(nèi)容也可以接受交互栗柒。
(4) GestureDetector
GestureDetector(
child: Text(
'GestureDetector',
style:
TextStyle(color: Colors.red, backgroundColor: Colors.yellow),
),
onTap: () {
print('GestureDetector');
},
),
GestureDetector 可以達(dá)到包裹內(nèi)容并接受交互的目的。
(5)Column
Column(
children: <Widget>[
Text('Hello World'),
Icon(Icons.share),
FlatButton(
child: Text('FlatButton'),
onPressed: (){
print('press FlatButton');
},
),
],
),
Column 用于列排展示 children 內(nèi)容知举。
(6)ListView
ListView 相當(dāng)于列表瞬沦。使用 ListTile 來(lái)展示列表內(nèi)容。
ListView(
children: <Widget>[
ListTile(
title: Text('姓名'),
trailing: Text('FlutterDev'),
),
ListTile(
title: Text('性別'),
trailing: Text('男'),
),
ListTile(
title: Text('地區(qū)'),
trailing: Text('河北'),
),
ListTile(
title: Text('手機(jī)'),
trailing: Text('176*****9396'),
),
ListTile(
title: Text('其他'),
subtitle: Text('subtile'),
leading: Icon(Icons.security),
trailing: Icon(Icons.share),
onTap: () {
print('ListTile1');
},
),
],
),
(7) ListTile
ListTile 是列表中的條目雇锡。
// 列表?xiàng)l目
ListTile(
// 標(biāo)題
title: Text('ListTile1'),
// 子標(biāo)題
subtitle: Text('subtile1'),
// 標(biāo)題左側(cè)的Widget
leading: Icon(Icons.security),
// 標(biāo)題右側(cè)的Widget
trailing: Icon(Icons.share),
onTap: () {
print('ListTile1');
},
),
五逛钻、頁(yè)面跳轉(zhuǎn)及回傳數(shù)據(jù)
頁(yè)面跳轉(zhuǎn)并傳值可以通過(guò)構(gòu)造方法傳值。
Navigator.push(context,
MaterialPageRoute(builder: (context) {
return QiListViewPage('iOS Dev');
})).then((onValue) {
print('回傳的數(shù)據(jù)：$onValue');
});
回傳數(shù)據(jù)锰提。
Navigator.pop(context, 'FlutterDev');
六曙痘、相關(guān)代碼
import 'package:flutter/material.dart';
// 應(yīng)用程序執(zhí)行入口
void main(List<String> args) {
// 初始化指定的Widget，并把Widget渲染效果繪制到屏幕上
// MaterialApp 控制界面風(fēng)格為安卓風(fēng)格
// CupertinoApp 界面風(fēng)格為iOS 風(fēng)格
// runApp(MaterialApp(
// title: '安卓切換任務(wù)管理時(shí)任務(wù)名',
// home: QiStatelessApp(),
// ));
runApp(MaterialApp(
title: '安卓切換任務(wù)管理時(shí)任務(wù)名',
home: QiStatefulApp(),
));
}
// QiStatefulApp 是有狀態(tài)的Widget
class QiStatefulApp extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return QiState();
}
}
QiState負(fù)責(zé)渲染QiStatefulApp要顯示的內(nèi)容
class QiState extends State<QiStatefulApp> {
@override
Widget build(BuildContext context) {
......
);
}
}
更多代碼見(jiàn)Demo：QiFlutterPage
七立肘、參考學(xué)習(xí)資料
- https://flutter.dev/docs/development/ui/widgets-intro
- https://book.flutterchina.club/chapter3/flutter_widget_intro.html
推薦文章：
5分鐘边坤，帶你迅速上手Markdown語(yǔ)法
Swift 5.1 (2) - 運(yùn)算符
Swift 5.1(1) - 基礎(chǔ)
iOS UI狀態(tài)保存和恢復(fù)（三）
iOS UI狀態(tài)保存和恢復(fù)（二）
iOS UI狀態(tài)保存和恢復(fù)（一）
iOS 中精確定時(shí)的常用方法
Sign In With Apple（一）
