Github：https://github.com/hellolad/you_yao_qi/tree/dev

以下是部分內容展示：

Flutter

Android

回到正題Flutter

Flutter是一個跨平臺的框架，在iOS和Android端甚至以後的PC端都可以統一一套程式碼來實現。Flutter的效能高效，Dart語言的簡易性和高效性，也使Flutter採用了Dart來開發跨平臺App。

在Flutter之前，開發跨平臺App大多采用了RN, Weex等底層需要JS Runtime來和Native端互動，在效能和效率上，都有很大的屏障。Flutter每次Debug或者Run都會被AOT（預編譯）成原生代碼，所以不會有Bridge這層東西，所以效率要比RN,Weex高。(在我開發的一個小專案中也驗證了這一點)。

Widget(控制元件，部件，也可以理解為iOS的UIView)

可以說Flutter裡最有特點的就是Widget了，可以說Flutter應用裡的所有控制元件都是Widget。Widget的可定製性強，擴充套件性強。

return Container( child: Text("Hello Flutter!"));

這就是一個Widget，Container是Widget的一個子類，當然它裡面有各種各樣的子類供你使用。

Dart

Dart語言可以說對於移動端開發來說，都比較陌生，因為純原生開發到現在，我只聽說過可以用C#開發iOS,可能我知道的太少了，不過Dart的學習還是比較簡單的，安卓開發人員用過Java，iOS開發人員用過Swift，所以再去看Dart都會有似曾相識的感覺。來看個例子:

void main() { List<String> list = ['1', '2', '3', '4', "5", "6"]; final str = list.join(" ").toString(); print(str); print(list.skip(1).toList()); print(list.getRange(3, list.length).toList());}1 2 3 4 5 6[2, 3, 4, 5, 6][4, 5, 6]

其實和Java和Swift的區別不大，一天差不多就可以入門。

怎麼開發一個App

相信很多人已經接觸了Flutter官方的教程，可是跟著寫了一遍之後，還是一頭霧水，不知道到底應該怎麼寫一個完整的App。下面看一個用Flutter模仿的有妖氣漫畫的例項：

螢幕快照

這個頁面的整個佈局都是Widget，在iOS里布局的話，這個必須是一個TableView或者CollectionView，在安卓裡應該是ListView,在Flutter裡這個Widget也是一個ListView,比較簡單。

螢幕快照

這個是在一個ListView裡套用了Column，就是垂直排列的意思，在iOS裡其實可以用tableView解決，這整個頁面可以用使用不同的Cell解決。

具體只有今日,發現這兩個模組的實現，其他的還在學習研究中。

三方庫

https://pub.dartlang.org 類似cocoapods.org. 第三方庫裡的圖片載入有個(cached_network_image)還是比較好的，可以快取，每次顯示的時候有個Ease動畫。具體可以在專案裡執行檢視。

網路獲取：

/// 獲取今日 模組的資料static Future<TodayResult> requestToday() async { final response = await http.get(todayURL); final map = jsonDecode(response.body); final code = map["code"]; final _data = map["data"]; final stateCode = _data["stateCode"]; final message = _data["message"]; final result = TodayResult( code: code, stateCode: stateCode, message: message, dayDataList: List<TodayModel>() ); final _returnData = _data["returnData"]; final _dayDataList = _returnData["dayDataList"]; if (_dayDataList.length == 0) { return result; } for (int i = 0; i < _dayDataList.length; i++) { final _dayItemDataList = _dayDataList[i]["dayItemDataList"]; final publish = TodayPublishDate.fromJSON(_dayDataList[i]); result.dayDataList.add(publish); for (int j = 0; j < _dayItemDataList.length; j++) { final _dayItemData = _dayItemDataList[j]; if (j != _dayItemDataList.length-1) { final dayItemData = DayItemData.fromJSON(_dayItemData); result.dayDataList.add(dayItemData); } else { final dayItemData2 = DayItemData2.fromJSON(_dayItemData); result.dayDataList.add(dayItemData2); } } } return result;

Banner滾動：

class BannerWidget extends StatefulWidget { final List<String> images; BannerWidget(this.images, {Key key}): super(key: key); _BannerWidgetState createState() => _BannerWidgetState();}class _BannerWidgetState extends State<BannerWidget> { final pageController = PageController(initialPage: 0); Timer timer; void resetTimer() { clearTimer(); timer = Timer.periodic(Duration(seconds: 3), (timer) { if (pageController.positions.isNotEmpty) { var i = pageController.page.toInt() + 1; pageController.animateToPage( i, duration: Duration(milliseconds: 100), curve: Curves.linear ); if (i == widget.images.length-1) { pageController.jumpToPage(0); i = 0; } } }); } void clearTimer() { if (timer != null) { timer.cancel(); timer = null; } } @override void initState() { // TODO: implement initState super.initState(); resetTimer(); } @override Widget build(BuildContext context){ if (widget.images.length == 0) { return null; } return SizedBox( height: 231.0, width: MediaQuery.of(context).size.width, child: PageView.builder( controller: pageController, physics: PageScrollPhysics(parent: ClampingScrollPhysics()), itemCount: widget.images.length, itemBuilder: (context, index){ final url = widget.images[index]; return Image( image: CachedNetworkImageProvider(url), fit: BoxFit.cover, ); }, ) ); } @override void dispose() { // TODO: implement dispose clearTimer(); super.dispose(); }}

生成一個卡片的Widget：

Widget _generatorCardWidget(BuildContext context, List<ComicItemModel> list) { return Container( child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: list.map<Widget>((comic){ return Container( width: (MediaQuery.of(context).size.width-20.0) / 3, child: Card( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Image( image: CachedNetworkImageProvider(comic.cover), fit: BoxFit.cover, ), Container( padding: EdgeInsets.all(5.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text(comic.name, style: TextStyle(fontSize: 15.0)), Text(comic.shortDescription, style: TextStyle(fontSize: 12.0, color: Colors.grey)) ], ), ), ], ), ), ); }).toList(), ), );}