• 歡迎關(guān)注我的公眾號(hào)
  

  公眾號(hào)

• 首先推薦兩篇文章，寫的非常的詳細(xì)，從中可以了解到原理，寫的非常的詳細(xì)！

  • 美團(tuán)技術(shù)團(tuán)隊(duì)Flutter見解
  • 下一代移動(dòng)端跨平臺(tái)框架-Flutter大解密

• Demo 的下載地址（正式包，使用Flutter命令打的正式包）

  
  image.png

• App詳情

ezgif-2-c954a6dd5e.gif
ezgif-2-f3661cf95e.gif

App的頁面詳情

HomePage;里面嵌套了四個(gè)頁面，使用的是TabBar和 TabBarView的組合，比如安卓中的Fragment Viewpager

• 1、首頁的第一頁使用豆瓣電影的接口，請(qǐng)求數(shù)據(jù)，并且展示出來了，工程中如何代碼中如何使用依賴？如下代碼所示

 flutter:sdk: flutter# The following adds the Cupertino Icons font to your application.# Use with the CupertinoIcons class for iOS style icons.cupertino_icons: ^0.1.0fluttertoast: ^2.0.7 #"Packages get" 要去主動(dòng)的 get 一次依賴 dio: ^v1.0.3# 添加網(wǎng)絡(luò)依賴 

• 2、演示了圖片控件擺放
• 3、綜合列表的展示
• 4、其他控件的使用Demo

首頁.jpg 一些控件.jpg

 * 首頁的關(guān)鍵代碼 ```//為給定的[子]控件創(chuàng)建默認(rèn)選項(xiàng)卡控制器。 return new DefaultTabController( length: 5, child: new Scaffold( appBar: new AppBar( backgroundColor: Colors.black45,// title: titleWidget(), title: new Text("首頁",style: new TextStyle(color: Colors.white,fontSize: 22.00),), actions: <Widget>[ new IconButton( icon: new Icon(Icons.add_a_photo), onPressed: () { Navigator .of(context) .push(new MaterialPageRoute(builder: (context) { return new OtherPage(); })); }) ], bottom: new TabBar( isScrollable: true, labelStyle: new TextStyle(fontSize: 22.00,color: Colors.red), indicatorPadding:EdgeInsets.zero, labelColor: Colors.white, indicatorWeight:4.0, unselectedLabelColor: Colors.blueAccent, tabs: [ new Tab( text: "豆瓣電影", ), new Tab( text: "控件擺放", ), new Tab( text: "列表展示", ), new Tab( text: "其他控件展示", ), ]), ), body: new TabBarView(children: [new TabOne(), new TabTwo(),new TabThree(),new TabFroth()]), )); ``` 

SimilarWordsPage尋找近義詞Demo，就是一個(gè)點(diǎn)擊按鈕，然后請(qǐng)求網(wǎng)絡(luò)，刷新頁面的流程。

• 1、使用了TextField相當(dāng)于安卓中的Edittext,只不過獲取值的時(shí)候有些變化

   new Expanded(child: new TextField(//不要主動(dòng)彈起來autofocus: false,controller: _textController,decoration: new InputDecoration.collapsed(hintText: "請(qǐng)輸入要查找的詞",hintStyle: new TextStyle(color: Colors.red)),), 

• 2、如何退出頁面Navigator.of(context).pop();
• 3、如何使用Toast，這里我是使用了三方的依賴!底層原理是使用了反射，具體實(shí)現(xiàn)的方法，有興趣的同學(xué)可以看看String res = await _channel.invokeMethod('showToast', params);

   Fluttertoast.showToast( msg: "輸入為空，請(qǐng)重新輸入", timeInSecForIos: 1, bgcolor: "#e74c3c", textcolor: '#ffffff'); 

  • 4、帶框的Button的使用，具體請(qǐng)看實(shí)現(xiàn)的代碼。
  • 5、具體頁面如下

近義詞頁面.jpg

• 6、代碼如下

 import 'dart:convert'; import 'dart:io'; import 'package:flutter/material.dart'; import 'package:flutter_app/bean/DataBean.dart'; import 'package:fluttertoast/fluttertoast.dart';class SimilarWordsPage extends StatefulWidget { @override State<StatefulWidget> createState() { return new SimilarWordsPageState(); } }class SimilarWordsPageState extends State<SimilarWordsPage> { List<DataBean> datas = []; static int i=0; final TextEditingController _textController = new TextEditingController();@override Widget build(BuildContext context) { return new Scaffold( appBar: findAppBar(), backgroundColor: Colors.black12, body: findBody(), ); }findBody() { return new Container( child: new Scaffold( body: new ListView.builder( itemCount: datas.length, itemBuilder: (BuildContext context, int position) { i=position; return getRow(position); }, ), )); }Widget findAppBar() { return new AppBar( title: new Container( child: new Row( children: <Widget>[ new Container( child: new FlatButton.icon( onPressed: () { // 本來就在棧頂，退出會(huì)有顯示的問題 Navigator.of(context).pop(); }, icon: new Icon(Icons.close, color: Colors.white30), label: new Text(""), ), width: 60.0, ), new Expanded( child: new TextField( //不要主動(dòng)彈起來 autofocus: false, controller: _textController, decoration: new InputDecoration.collapsed( hintText: "請(qǐng)輸入要查找的詞", hintStyle: new TextStyle(color: Colors.red)), ), ), //點(diǎn)擊事件的第一種實(shí)現(xiàn)的方式我覺得不太好 //new GestureDetector(child: new Icon(Icons.find_in_page),onTap: (){print("dd");}) // 這種點(diǎn)擊時(shí)間有點(diǎn)效果 new IconButton( icon: new Icon(Icons.find_in_page), onPressed: () { print(_textController.text); if (_textController.text.isEmpty) { Fluttertoast.showToast( msg: "輸入為空，請(qǐng)重新輸入", timeInSecForIos: 1, bgcolor: "#e74c3c", textcolor: '#ffffff'); } else { FocusNode focusNode = new FocusNode(); FocusScope.of(context).requestFocus(new FocusNode()); Fluttertoast.showToast( msg: "查找值為：" + _textController.text, timeInSecForIos: 1, bgcolor: "#e74c3c", textcolor: '#ffffff'); getApiData(_textController.text); focusNode.unfocus(); } }) ], ), decoration: new BoxDecoration( borderRadius: const BorderRadius.all(const Radius.circular(4.0)), color: Colors.white10), )); }Widget getRow(int i) { return new Padding( padding: new EdgeInsets.all(10.0), // child: new Text("Row ${datas[i].key}",style: new TextStyle(color: Colors.orange,fontSize: 18.00),) //Column 相當(dāng)于 相對(duì)布局Row 線性布局 child: new Column( children: <Widget>[ new Padding( padding: new EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 5.0), child: new Row( children: <Widget>[ new Expanded( child: new OutlineButton( borderSide:new BorderSide(color: Theme.of(context).primaryColor), child: new Text('條目 = '+i.toString(),style: new TextStyle(color: Theme.of(context).primaryColor),), onPressed: (){}, ) ), ], ), ),new Container( child: new Text( "聯(lián)想到的詞：" + datas[i].key, style: new TextStyle(color: Colors.purple, fontSize: 12.00), ), padding: new EdgeInsets.all(10.0), ), new Container( child: new Text("聯(lián)想到詞的翻譯信息：" + datas[i].message, style: new TextStyle(color: Colors.cyan, fontSize: 15.00)), padding: new EdgeInsets.all(10.0), ) ], ), ); }@override void initState() { super.initState(); // 網(wǎng)絡(luò)請(qǐng)求 //http://dict-mobile.iciba.com/interface/index.php?c=word&m=getsuggest&nums=10&client=6&is_need_mean=1&word=sm //我的 Api的地址 getApiData("sm"); }// 網(wǎng)絡(luò)請(qǐng)求 void getApiData(String tag) async { // 注意導(dǎo)入的包的地方是import 'dart:io'; var httpClient = new HttpClient(); var url = "http://dict-mobile.iciba.com/interface/index.php?c=word&m=getsuggest&nums=20&client=6&is_need_mean=1&word=" + tag; var request = await httpClient.getUrl(Uri.parse(url)); var response = await request.close(); if (response.statusCode == HttpStatus.OK) { var jsonData = await response.transform(utf8.decoder).join(); setState(() { datas = DataBean.decodeData(jsonData); }); for (int i = 0; i < datas.length; i++) { print(datas[i].key); print(datas[i].message); } } } } 

官方Demo

官方Demo.jpg

關(guān)于我

關(guān)于我.jpg

一些總結(jié)

• widget相當(dāng)于View，Widget的實(shí)例僅僅存在每一幀之間，并且每一幀之間 Flutter都會(huì)主動(dòng)的創(chuàng)建一顆Widget樹用于下一幀的渲染。
• Android 中 View 是可變的，在 Flutter 中的 Widget 是不可變的。這種特性使得 Flutter 中的 Widget 變得十分輕量級(jí)
• 一個(gè) Widget會(huì)變化，那么它就是有狀態(tài)的。但是如果一個(gè)子Widget是有狀態(tài)的，但是其父Widget是不可變的話父Widget也可以是 StatelessWidget。
• TatelessWidget和StatefulWidget 的核心內(nèi)容是一致的，它們都會(huì)在每一幀中被重構(gòu)，不同之處在于StatefulWidget 有一個(gè) State 對(duì)象，它可以為 StatefulWidget 在不同幀之間存儲(chǔ)數(shù)據(jù)。
• Flutter 中UI的布局是通過在dart 文件中構(gòu)建 Widget 樹來實(shí)現(xiàn)的。
• 在 Android中，使用 LinearLayout 使你的部件垂直或水平放置。在 Flutter中，你可以使用Row 或者 Co??lumn 來實(shí)現(xiàn)相同的效果。
• 在 Flutter 中，最簡單的方法是使用ListView 。在Flutter 中，ListView 既是ScrollView 又是Android中的ListView。
• 通過使用Column，Row 和Stack等 Widget 的組合來實(shí)現(xiàn) RelativeLayout 的效果
• Flutter 中，添加觸摸監(jiān)聽器有兩種方法
• 如果Widget支持事件檢測，則可以將一個(gè)函數(shù)傳遞給它并進(jìn)行處理。例如，RaisedButton 有一個(gè)onPressed 參數(shù)
• 如果 Widget不支持事件檢測，則可以將該 Widget 包裝到 GestureDetector中，并將函數(shù)傳遞給onTap 參數(shù)。
• GestureDetector 我們可以監(jiān)聽廣泛的手勢
• 要充分利用應(yīng)用程序中的 Material風(fēng)格的組件的話，可以把頂級(jí)部件 MaterialApp作為應(yīng)用程序的入口。MaterialApp作為一個(gè)比較方便的部件，包裝了許多實(shí)現(xiàn)了 Material 風(fēng)格所需要的部件（如 Scaffold）。MaterialApp是在 WidgetsApp 的基礎(chǔ)上進(jìn)行實(shí)現(xiàn)的
• Flutter不會(huì)自動(dòng)導(dǎo)入包
• Column相當(dāng)于 相對(duì)布局Row線性布局
• 首頁的數(shù)據(jù)結(jié)構(gòu)展示
• HttpClient導(dǎo)入的包是io里面的
• DEBUG 包要不正式包大很多 Built build\app\outputs\apk\debug\app-debug.apk (31.9MB).而正式包才8.4M.
• 解決的Bug的時(shí)候太痛苦了，Flutter使用 ide ，太痛苦了
• 在腦袋要構(gòu)思出 這個(gè)布局的整體的結(jié)構(gòu)
• 關(guān)閉系統(tǒng)自帶的防火墻，重啟OK由于需要出差，就是用的是筆記本開發(fā)，導(dǎo)致自己筆記本的防火墻沒有被關(guān)閉，真的是日了狗了,解決防火墻。
• MediaQuery.of(context).size.width /4分之一的屏幕
• MaterialApp 帶有 Debug的標(biāo)記

感謝以下資料給與我的幫助

• Android 開發(fā)者參考
• Api的接口 查詢近義詞
• Api的接口 豆瓣電影
• 打包的流程

求贊或者求星星 FlutterApp

本頁內(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/18051.html