Flutter 專題目錄匯總: 這個(gè)目錄方便大家快速查詢你要學(xué)習(xí)的內(nèi)容!!!
??一、創(chuàng)建一個(gè)Flutter 工程??
下面我們通過(guò) Android Studio 安裝的 Flutter插件 創(chuàng)建 Flutter 工程
Android Studio 主界面 -> Create Flutter Project
說(shuō)明: ??上面截圖的四個(gè)功能
-
Flutter Application: 創(chuàng)建一個(gè)Flutter應(yīng)用工程 -
Flutter plugin: 這是為了給Android和iOS提供插件應(yīng)用(暴露的借口)的時(shí)候使用 -
Flutter Package: 創(chuàng)建一個(gè)Dart組件發(fā)布到pub來(lái)提供便捷開發(fā) 類似一些三方庫(kù) -
Flutter Module: 一般用來(lái)做混合開發(fā),嵌入到Android和iOS工程當(dāng)中!
創(chuàng)建完畢我們就可以初體驗(yàn)運(yùn)行一下 感受一下 Flutter 經(jīng)典默認(rèn)頁(yè)面
??二、Flutter 聲明式語(yǔ)法??
-
命令式編程：命令“機(jī)器”如何去做事情(how)，這樣不管你想要的是什么(what)，它都會(huì)按照你的命令實(shí)現(xiàn)。 -
聲明式編程：告訴“機(jī)器”你想要的是什么(what)，讓機(jī)器想出如何去做(how)。
可能你這里通過(guò)這個(gè)還是無(wú)法明白什么是 命令式編程 什么是 聲明式編程 我們以一個(gè)視圖UI 做為??說(shuō)明一下
首先我們看看 命令式編程 的代表 : Object-C
UIView *view = [[UIView alloc] init];
view.frame = self.view.bounds;
view.backgroundColor = [UIColor orangeColor];
我們要告訴“機(jī)器”: view的布局是 self.view.bounds view的背景色是 orangeColor
如果需要改變視圖,你通常需要使用選擇器 findViewById 或類似函數(shù)獲取到 ViewB 的實(shí)例 view 和所有權(quán)，并調(diào)用相關(guān)的修改的方法（并隱式的使其失效）
view.backgroundColor = [UIColor blueColor];
由于 UI 真實(shí)的來(lái)源可能比實(shí)例 view 本身的存活周期更長(zhǎng)，你可能還需要在 view 的構(gòu)造函數(shù)中復(fù)制此配置
在聲明式風(fēng)格中，視圖配置（如 Flutter 的 Widget ）是不可變的，它只是輕量的“藍(lán)圖”。要改變 UI，widget 會(huì)在自身上觸發(fā)重建（在 Flutter 中最常見的方法是在 StatefulWidgets 組件上調(diào)用 setState()）并構(gòu)造一個(gè)新的 Widget 子樹。
// Declarative style
return ViewB(
color: red,
child: ViewC(...),
)
很明顯兩個(gè)模式側(cè)重的點(diǎn)是完全不一樣的! 如果還有不太理解的, 不妨都看兩遍就會(huì)有感覺(jué)了!!!
??三、Flutter 工程初體驗(yàn)??
對(duì)上面聲明式語(yǔ)法有一定的理解之后,我們開始玩玩代碼,首先默認(rèn)工程你可能看懂代碼,但是只是一層粗略的看,現(xiàn)在我們學(xué)習(xí),不防一點(diǎn)一點(diǎn)來(lái)! 先干掉整個(gè)程序一些代碼,留下??
接下來(lái)我們開始編寫一個(gè)簡(jiǎn)單的代碼
??① flutter 文本組件體驗(yàn)??
// 導(dǎo)入系統(tǒng)包 : 作用類似 #import <UIKit/UIKit.h>
import 'package:flutter/material.dart';
// 程序運(yùn)行的 main 函數(shù) (入口0
void main() {
// 應(yīng)用程序運(yùn)行的函數(shù) 類比: UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
// 因?yàn)樵?Flutter 世界里面 都是各種部件
// 這里我們簡(jiǎn)單使用一下 Center 來(lái)寫一個(gè) 文本
runApp(Center(
child: Text(
'和諧學(xué)習(xí),不急不躁', // 文本
textDirection: TextDirection.ltr, // 對(duì)齊方式
style: TextStyle(
fontSize: 40.0, // 字體大小
color: Colors.red, // 紅色字體
fontWeight: FontWeight.w400, // 字體的粗細(xì)
),
)));
}
是不是感覺(jué)很清爽, Flutter 本身在編寫代碼還是比較輕松的, 畢竟有沒(méi)有發(fā)現(xiàn)這樣的語(yǔ)法結(jié)構(gòu)越來(lái)越趨于 大前端一統(tǒng)...
??② flutter 導(dǎo)航欄體驗(yàn)??
class KCBar extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold( // 類似 nav
appBar: AppBar( // 導(dǎo)航欄
title: Text('KCFlutterBar',style: TextStyle(color: Colors.white),),
),
body: KCWidget(),
floatingActionButton: FloatingActionButton(),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
),
theme: ThemeData(
primaryColor: Colors.orange
),
);
}
}
下面我們看看顯示的效果,還是比較 OK!
聰明的你們估計(jì)寫到你就會(huì)發(fā)現(xiàn) 編碼還是有點(diǎn)不太適應(yīng). 我這里給大家推薦幾個(gè)快捷鍵,方便大家快速優(yōu)美編程
-
Command + o: 全局搜索 -
command + option + l: 格式化代碼 -
command + l: 注釋代碼 -
command + -: 折疊和展開代碼 -
command + [: 代碼返回 -
command + ]: 代碼前進(jìn) -
cmd + C / cmd + delete: 刪除行 -
ctr + alt + I: 自動(dòng)縮進(jìn)對(duì)齊 -
opt + sft + up/down: 上下移動(dòng)代碼 -
ctrl + tab: 切換文件 -
shift + command + enter: 行尾自動(dòng)添加分號(hào)，if后面自動(dòng)加“(){ }” -
cmd + N: 快速生成getter／setter方法，構(gòu)造方法，toString()方法等 -
cmd + J: 快速生成模版代碼塊，如if,while,return -
opt + cmd + T: Surround with快速調(diào)出if,for,try…catch,while等環(huán)繞代碼 -
opt + ctr + o: 刪除未使用的import -
option + enter: 自動(dòng)導(dǎo)入用到的包 -
stless: 創(chuàng)建新的StatelessWidget -
stful: 創(chuàng)建新的StatefulWidget
??③ flutter listView 列表界面??
class KCListView extends StatelessWidget {
Widget _itemForRow(BuildContext context, int index) {
return Container(
color: Colors.white,
margin: EdgeInsets.fromLTRB(10, 10, 10, 10),
child: Column(
children: <Widget>[
Image.network(carDatas[index].imageUrl),
SizedBox(height: 10),
Text(
carDatas[index].name,
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w800,
fontStyle: FontStyle.values[1]),
),
SizedBox(height: 10),
],
),
);
}
@override
Widget build(BuildContext context) {
return ListView.builder(
itemBuilder: _itemForRow,
itemCount: carDatas.length,
);
}
}
通過(guò)導(dǎo)航欄樣式加載列表結(jié)構(gòu), 從而加載數(shù)據(jù)其實(shí)如果你跟著寫到這里應(yīng)該很容易可以感受到聲明式語(yǔ)法的魅力! 只有你掌握這種寫法 再加上以前對(duì)UI布局的理解就很容易寫出應(yīng)用 (?? 彈性盒子布局 Flex ??)
這里就只貼出一些需要感受的代碼 如果你也對(duì)著敲一敲代碼,可以移步到 github: Flutter專欄代碼 這里面紀(jì)錄整個(gè)專欄的代碼 一直保持更新 喜歡的可以點(diǎn)贊??收藏
??四、總結(jié)??
這一篇關(guān)于 Flutter 的初體驗(yàn)可能因?yàn)槟氵€只是一個(gè) Flutter小白 感受不強(qiáng),但是沒(méi)有關(guān)系 多敲敲就有感受了,這個(gè)東西真心的敲得越多越有感受,最好敲出肌肉記憶! Flutter 的代碼的簡(jiǎn)潔性還是很強(qiáng)的.你會(huì)慢慢愛上敲 Flutter代碼的!
來(lái)吧! 我們一起敲
Flutter: github: Flutter專欄代碼下一篇開始我們會(huì)切入到
Flutter細(xì)節(jié)! 點(diǎn)贊收藏不迷路哦
