一区二区三区欧美日韩-一区二区三区欧美-一区二区三区免费在线视频-一区二区三区免费在线观看-久久精品店-久久精品第一页

歡迎您光臨深圳塔燈網(wǎng)絡(luò)科技有限公司!
電話圖標(biāo) 余先生:13699882642

網(wǎng)站百科

為您解碼網(wǎng)站建設(shè)的點點滴滴

跨端應(yīng)用Flutter初體驗

發(fā)表日期:2018-12 文章編輯:小燈 瀏覽次數(shù):2123

概述

Google開源的跨端應(yīng)用解決方案,官方介紹:

Flutter allows you to build beautiful native apps on iOS and Android from a single codebase

Flutter是谷歌開源的移動UI框架,可在iOSAndroid快速創(chuàng)建原生用戶界面,F(xiàn)lutter是完全免費(fèi)和開源的,其中腳本語言采用Dart
Flutter組件采用現(xiàn)代響應(yīng)式框架構(gòu)建,從React中獲得靈感,中心思想是用組件(widget)構(gòu)建你的UI。 組件描述了在給定其當(dāng)前配置和狀態(tài)時他們顯示的樣子,當(dāng)組件狀態(tài)改變,組件會重構(gòu)它的描述(description),Flutter會從底層渲染樹將當(dāng)前狀態(tài)轉(zhuǎn)換到下一個狀態(tài)所需要的最小更改。

image

Windows環(huán)境搭建

  • 在環(huán)境變量中配置
1export PUB_HOSTED_URL=https://pub.flutter-io.cn2export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn 
  • 系統(tǒng)要求:需要Windows 7.0/Windows 7.0+,安裝Git命令;
  • flutter.io官網(wǎng)下載最新包,解壓到非系統(tǒng)盤目錄;
  • 如果你使用android studio開發(fā)安卓應(yīng)用,必須在您的機(jī)器上安裝有android sdk
  • 運(yùn)行目錄下的flutter_console.bat,在Dos中輸入flutter doctor安裝依賴并自行編譯,可能需要10幾分鐘,請耐心等待,如果flutter命令無法顯示,請將安裝目錄的bin的目錄加入到path路徑下;
  • android studio中安裝flutter插件,在應(yīng)用商店搜索flutter安裝即可;
  • 安裝完Dard-SDK和Flutter-SDK后,你無需使用android studio開發(fā),利用輕量級的vs code照樣可以開發(fā)flutter應(yīng)用,比如我的環(huán)境:
image

注:只需要在vs code中安裝插件dart和flutter,利用flutter create xxx新建一個flutter項目,利用flutter emulators列出本機(jī)AVD列表,選一個模擬器運(yùn)行:flutter emulators launch AVD_ID即可,在vscode中修改代碼,只需要在終端中輸入“r”即可實時在模擬器中看到效果,非常輕量和方便。

從一個例子說起

我們實現(xiàn)一個用戶列表,顯示最近使用我們sumslack服務(wù)的用戶列表,并在列表中顯示頭像,效果如下圖:


image.png

技術(shù)點:

  1. 通過http異步獲取用戶列表;
  2. json解析;
  3. ListView顯示;
    Flutter采用Dart語言編寫,支持熱部署,修改代碼后即可在手機(jī)在看到實時效果,一個最簡單的Hello World的例子如下,從中可看到項目結(jié)構(gòu):
import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Welcome to Flutter', home: new Scaffold( appBar: new AppBar( title: new Text('Welcome to Flutter'), ), body: new Center( child: new Text('Hello World'), ), ), ); } } 
代碼結(jié)構(gòu)分析
  • 本示例創(chuàng)建一個Material APP。Material是一種標(biāo)準(zhǔn)的移動端和web端的視覺設(shè)計語言。 Flutter提供了一套豐富的Material widgets。
  • main函數(shù)使用了(=>)符號, 這是Dart中單行函數(shù)或方法的簡寫。
  • 該應(yīng)用程序繼承了 StatelessWidget,這將會使應(yīng)用本身也成為一個widget。 在Flutter中,大多數(shù)東西都是widget,包括對齊(alignment)、填充(padding)和布局(layout)
  • Scaffold 是 Material library 中提供的一個widget, 它提供了默認(rèn)的導(dǎo)航欄、標(biāo)題和包含主屏幕widget樹的body屬性。widget樹可以很復(fù)雜。
  • widget的主要工作是提供一個build()方法來描述如何根據(jù)其他較低級別的widget來顯示自己。
  • 本示例中的body的widget樹中包含了一個Center widget, Center widget又包含一個 Text 子widget。 Center widget可以將其子widget樹對其到屏幕中心。

基礎(chǔ)以上最簡單的示例,在我們構(gòu)建用戶列表這個app時,首先主體結(jié)構(gòu)和hello world例子并無差異,如下dart代碼:

 import 'package:flutter/material.dart';import 'package:hello_world/homepage.dart';void main() => runApp(new MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return new MaterialApp( title: '用戶列表', theme: new ThemeData( primarySwatch: Colors.orange, ), home: new MyHomePage() ); } } 

頁面的主體內(nèi)容是一個ListViewListView里每個ListItem又是一個復(fù)雜Widget,采用RowColumn的布局容器即可實現(xiàn),MyHomePage.dart代碼如下:

 import 'package:flutter/material.dart';import 'package:dio/dio.dart';import 'dart:convert' show json;Dio dio = new Dio();class MyHomePage extends StatefulWidget {@overrideState<StatefulWidget> createState() { return new _MyHomePageState(); } }class _MyHomePageState extends State<MyHomePage>{ List<Model> _items = [];@override void initState() { super.initState(); _getListDate(); }@override Widget build(BuildContext context){ return new Scaffold( appBar: new AppBar( title: new Text("用戶列表"), ), body: new ListView.builder(itemCount: _items.length,itemBuilder: itemView,) ); }Widget itemView(BuildContext context,int index){ Model model = this._items[index]; if(index.isOdd) return new Divider(height:2.0); return new Container( color:Color.fromARGB(0x22, 0x49, 0x49,0x8d), child: new Padding( padding: const EdgeInsets.all(8.0), child: new Padding( padding: const EdgeInsets.all(8.0), child: new Column( children: <Widget>[ new Row( children: <Widget>[ Image.network('${model.avator}',width: 70,height: 70,), new Text('${model.uid}',style: new TextStyle(fontSize: 20.0)), ] ), new Center( heightFactor: 2.0, child: new Text("${model.nickname}",style: new TextStyle(fontSize: 25.0),), ) ], ) ) ) ); }void _getListDate(){ //列表來自http請求 Future<Response<String>> response= dio.get("http://wx.sumslack.com/restful/stat/userList.jhtml?p=1"); response.then((item){ List<Model> widgets = []; final dynamic dataJson = json.decode(item.data); final List resultList = dataJson['result']; resultList.forEach((dynamic _user){ print(_user["nickname"]); widgets.add(new Model(_user["uid"],_user["nickname"],_user["avator"])); }); setState(() { _items= widgets; }); }); }}class Model { String uid; String nickname; String avator; Model(this.uid,this.nickname,this.avator); } 

在模擬器或手機(jī)上運(yùn)行即可看到截圖中的效果,F(xiàn)lutter相比Weex更復(fù)雜,畢竟Dart語言平時接觸不多,可以在官網(wǎng):https://flutter.io/docs/get-started/install 找到更多學(xué)習(xí)材料,阿里技術(shù)公眾號中有一篇更深入講解Flutter的文章:《深入理解Flutter的編譯原理與優(yōu)化》

相比阿里開源的Weex,flutter能更好的替代native頁面展現(xiàn)復(fù)雜的交互頁面,性能也更好,weex用來展現(xiàn)內(nèi)容頁面更加合適,還有就是表單類的頁面,但對于復(fù)雜的頁面交互,weex性能略差。

如果你沒接觸過weex,并且對vue也并不熟悉,那么,筆者強(qiáng)烈建議您使用Flutter作為您的跨端應(yīng)用解決方案。


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

多一份參考,總有益處

聯(lián)系深圳網(wǎng)站公司塔燈網(wǎng)絡(luò),免費(fèi)獲得網(wǎng)站建設(shè)方案及報價

咨詢相關(guān)問題或預(yù)約面談,可以通過以下方式與我們聯(lián)系

業(yè)務(wù)熱線:余經(jīng)理:13699882642

Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.    

主站蜘蛛池模板: 国产精品久久久久久久伊一 | 日本漫画母亲口工子全彩| 人曽交Z00Z0OA片| 羞羞影院午夜男女爽爽免费| 越南女子杂交内射BBWXZ| 边做边爱BD免费看片| 好男人在线高清WWW免费观看| 嫩草成人国产精品| 午夜国产大片免费观看| 87.6在线收听| 国产精品美女WWW爽爽爽视频| 空姐厕所啪啪啪| 无码人妻少妇色欲AV一区二区| 在线自拍综合亚洲欧美| 沟沟人体一区二区| 久久这里只有精品国产99| 十八禁久久成人一区二区| 中文字幕人成人乱码亚洲影视S| 动漫H片在线播放免费高清| 久久re6热在线视频| 射死你天天日| 2021久久精品免费观看| 国产三级电影网| 欧美人与动牲交ZOOZ特| 亚洲天堂视频网站| 粉嫩无套白浆第一次jk| 麻豆啊传媒app黄版破解免费| 午夜久久影院| xxxx18动漫| 亚洲男人97色综合久久久| 99re 这里只有精品| 好妞操| 十分钟在线观看免费视频高清WWW| 2022国产麻豆剧传媒剧情| 国产在线观看免费| 日韩视频中文在线一区| 973午夜伦伦电影论片| 精品国产免费第一区二区| 我要色色网| 办公室里呻吟的丰满老师电影| 老司机亚洲精品影院|