前言

還未安裝環(huán)境的童鞋可以看下這個(gè)flutter環(huán)境安裝
不錯(cuò)的學(xué)習(xí)網(wǎng)站：
1.flutter官方中文網(wǎng)站：https://flutterchina.club/docs/
2.Flutter七日游(張風(fēng)捷特烈）:https://juejin.im/user/5b42c0656fb9a04fe727eb37
3.咸魚官方博客：https://zhuanlan.zhihu.com/xytech
ps:前2個(gè)都比較基礎(chǔ)，最后一個(gè)比較深入

計(jì)劃將基礎(chǔ)控件，布局控件結(jié)束后，再進(jìn)行自定義繪制控件

基礎(chǔ)控件

widget: 小器具，裝飾品，窗口小部件;這里統(tǒng)一稱為控件

要學(xué)flutter，肯定要先學(xué)會(huì)怎么使用控件
統(tǒng)計(jì)了一部分控件，做了一個(gè)表格：

widget	flutter	android
文本	Text	TextView
按鈕
漂浮按鈕	RaisedButton	Button
扁平按鈕	FlatButton
邊框按鈕	OutlineButton
圖片按鈕	IconButton	ImageButton
浮動(dòng)動(dòng)作按鈕	FloatingActionButton	FloatingActionButton
編輯框	TextField	EditText
圖片	Image	ImageView
圖標(biāo)	Icon
復(fù)選框	Checkbox	CheckBox
單選框	Radio	RadioButton
單選開關(guān)	Switch	Switch
底部彈框	SnackBar	SnackBar
滾動(dòng)控件	SingleChildScrollView	ScrollView
線性滾動(dòng)列表	ListView	RecyclerView(LinearLayoutManager)
網(wǎng)格滾動(dòng)列表	GridView	RecyclerView（GridLayoutManager）
自定義滾動(dòng)	CustomScrollView	RecyclerView(StaggeredGridLayoutManager)
滾動(dòng)條	ScrollBar
彈框	Dialog	AlertDialog
進(jìn)度條	ProgressIndicator	ProgressBar
圓形進(jìn)度條	CircularProgressIndicator
線性進(jìn)度條	LinearProgressIndicator
滑動(dòng)條	Slider	SeekBar
導(dǎo)航欄	AppBar	ToolBar
選項(xiàng)欄	TapBar+TapBarView
底部導(dǎo)航欄	BottomNavigationBar
分割線	Divider
側(cè)滑菜單	Drawer	DrawerLayout
底抽屜	BottomSheet	BottomSheet
流式標(biāo)簽	Chip	Chip
圓形頭像	CircleAvatar

控件很多，怎么學(xué)習(xí)來快呢？（ps:自我感覺）

學(xué)習(xí)之前，我們需要明確2個(gè)感念：

1. StatelessWidget:無中間狀態(tài)變化的widget，需要更新展示內(nèi)容就得通過重新new，flutter推薦盡量使用StatelessWidget
2. StatefullWidget:存在中間狀態(tài)變化的widget，state類用于存放中間態(tài)，通過調(diào)用state.setState()進(jìn)行此節(jié)點(diǎn)及以下的整個(gè)子樹更新
   然后我們了解androidstudio的三個(gè)快捷鍵

快捷鍵	作用
stless	創(chuàng)建一個(gè)StatelessWidget
stful	創(chuàng)建一個(gè)StatefullWidget
stanim	創(chuàng)建一個(gè)StatefullWidget ，且包含動(dòng)畫

---

準(zhǔn)備工作完成
接下來我們以ScrollBar為例，來學(xué)習(xí)這個(gè)控件：

工程目錄

我們創(chuàng)建一個(gè)新的flutter工程時(shí)，系統(tǒng)會(huì)創(chuàng)建一大堆文件，那么我們的dart代碼是在哪呢？
dart代碼就在同級(jí)目錄下的lib文件中
這里會(huì)發(fā)現(xiàn)同時(shí)存在android和ios 2個(gè)文件夾，對(duì)的，flutter編譯后的應(yīng)用是同時(shí)支持雙端的（ps：或者說是三端，fuchsia已經(jīng)在布局了）

enum TargetPlatform { /// Android: <https://www.android.com/> android,/// Fuchsia: <https://fuchsia.googlesource.com/> fuchsia,/// iOS: <http://www.apple.com/ios/> iOS, } 

回歸正題，系統(tǒng)會(huì)創(chuàng)建一個(gè)main.dart文件

import 'package:flutter/material.dart'; //main 程序的主入口 void main() => runApp(MyApp()); //運(yùn)行一個(gè)MaterialApp控件 class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( //應(yīng)用的圖標(biāo)名稱 title: 'Flutter Demo', //主題 theme: ThemeData( primarySwatch: Colors.blue, ), //主界面 home: MainPage() ); } } 

這里代碼基本固定了，你肯定要使用MaterialApp控件的，否則不好看（我這里不說不符合規(guī)范）

class MainPage extends StatelessWidget { @override Widget build(BuildContext context) { //腳手架 return Scaffold( //相當(dāng)于toolbar，導(dǎo)航欄 appBar: AppBar( title: Text("flutter"), ), //正文 body: ScrollBarDemo ); } } 

我們要開始創(chuàng)建一個(gè)ScrollBar了,先看下其的源碼：

class Scrollbar extends StatefulWidget { /// typically a [Scrollable] widget. const Scrollbar({ Key key, @required this.child, }) : super(key: key);/// Typically a [ListView] or [CustomScrollView]. final Widget child;@override _ScrollbarState createState() => _ScrollbarState(); } 

源碼說需要傳遞一個(gè)child,且必須為Scrollable,然后給了2個(gè)選擇[ListView] 或 [CustomScrollView]
構(gòu)造函數(shù)中的{}表示可選命名參數(shù)，@required表示child這個(gè)參數(shù)必須傳遞
Scrollable我們可以大膽的猜測(cè)，能滾動(dòng)的控件肯定都包涵這個(gè)控件,所以我們選類似android中的那個(gè)ScrollView的控件SingleChildScrollView
然后我們寫下代碼

class ScrollBarDemo extends StatelessWidget { @override Widget build(BuildContext context) { return Scrollbar( child: SingleChildScrollView( child:Container() ) ); } } 

接下來看看SingleChildScrollView

class SingleChildScrollView extends StatelessWidget { const SingleChildScrollView({ Key key, this.scrollDirection = Axis.vertical, this.reverse = false, this.padding, bool primary, this.physics, this.controller, this.child, }) : ...,super(key: key);//省略了斷言 final Axis scrollDirection; //滾動(dòng)方向，水平和垂直 final bool reverse; //是否反向，默認(rèn)不啟用 final EdgeInsetsGeometry padding;//間距 final ScrollController controller;//滑動(dòng)控制器 final bool primary;//默認(rèn)true final ScrollPhysics physics;//超過物理邊界后的動(dòng)畫效果 final Widget child; ... @override Widget build(BuildContext context) { ... //內(nèi)部創(chuàng)建了一個(gè)Scrollable控件 final Scrollable scrollable = Scrollable( axisDirection: axisDirection, controller: scrollController, physics: physics, viewportBuilder: (BuildContext context, ViewportOffset offset) { return _SingleChildViewport( axisDirection: axisDirection, offset: offset, child: contents, ); }, ); return primary && scrollController != null ? PrimaryScrollController.none(child: scrollable) : scrollable; } } 

源碼可以看出，所有參數(shù)都是可選的，也就是說child其實(shí)也可以不傳的，但這樣就整個(gè)界面就是空白的

class ScrollBarDemo extends StatelessWidget { final String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; @override Widget build(BuildContext context) { return Scrollbar( child: SingleChildScrollView( child:Container( color: Colors.redAccent, width: 360, child: Column( //創(chuàng)建一個(gè)Text控件列表 children: str.split("").map((c) => Text(c, textScaleFactor: 2.0,)).toList(), ) ) ) ); } } 

關(guān)于布局、監(jiān)聽、路由、手勢(shì)等接下來在介紹

---

小小的總結(jié)一下
1.遇到一個(gè)widget,先看它的構(gòu)造函數(shù)（可能有多個(gè)）
a. StatelessWidget，看其build方法做了什么
b. StatefulWidget，先找到createState(),然后在state類中看其build方法做了什么
2.配合源碼中的英文注釋加以理解
3.動(dòng)手實(shí)踐一番，測(cè)試效果

最后說明一下，flutter生成的代碼都封裝在libflutter.so中，不再是以前的.class文件

github代碼：https://github.com/leaf-fade/flutterDemo

---

小尾巴：文章有錯(cuò)誤的地方請(qǐng)不吝指出，會(huì)及時(shí)更改

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://www.cokiv.cn/17673.html