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