概述

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

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

Flutter是谷歌開源的移動(dòng)UI框架，可在iOS和Android快速創(chuàng)建原生用戶界面，F(xiàn)lutter是完全免費(fèi)和開源的，其中腳本語(yǔ)言采用Dart。
Flutter組件采用現(xiàn)代響應(yīng)式框架構(gòu)建，從React中獲得靈感，中心思想是用組件(widget)構(gòu)建你的UI。 組件描述了在給定其當(dāng)前配置和狀態(tài)時(shí)他們顯示的樣子，當(dāng)組件狀態(tài)改變，組件會(huì)重構(gòu)它的描述(description)，Flutter會(huì)從底層渲染樹將當(dāng)前狀態(tài)轉(zhuǎn)換到下一個(gè)狀態(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幾分鐘，請(qǐng)耐心等待，如果flutter命令無(wú)法顯示，請(qǐng)將安裝目錄的bin的目錄加入到path路徑下；
• 在android studio中安裝flutter插件，在應(yīng)用商店搜索flutter安裝即可；
• 安裝完Dard-SDK和Flutter-SDK后，你無(wú)需使用android studio開發(fā)，利用輕量級(jí)的vs code照樣可以開發(fā)flutter應(yīng)用，比如我的環(huán)境：

image

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

從一個(gè)例子說(shuō)起

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

image.png

技術(shù)點(diǎn)：

1. 通過(guò)http異步獲取用戶列表；
2. json解析；
3. ListView顯示；
   Flutter采用Dart語(yǔ)言編寫，支持熱部署，修改代碼后即可在手機(jī)在看到實(shí)時(shí)效果，一個(gè)最簡(jiǎn)單的Hello World的例子如下，從中可看到項(xiàng)目結(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)建一個(gè)Material APP。Material是一種標(biāo)準(zhǔn)的移動(dòng)端和web端的視覺設(shè)計(jì)語(yǔ)言。 Flutter提供了一套豐富的Material widgets。
• main函數(shù)使用了(=>)符號(hào), 這是Dart中單行函數(shù)或方法的簡(jiǎn)寫。
• 該應(yīng)用程序繼承了 StatelessWidget，這將會(huì)使應(yīng)用本身也成為一個(gè)widget。 在Flutter中，大多數(shù)東西都是widget，包括對(duì)齊(alignment)、填充(padding)和布局(layout)
• Scaffold 是 Material library 中提供的一個(gè)widget, 它提供了默認(rèn)的導(dǎo)航欄、標(biāo)題和包含主屏幕widget樹的body屬性。widget樹可以很復(fù)雜。
• widget的主要工作是提供一個(gè)build()方法來(lái)描述如何根據(jù)其他較低級(jí)別的widget來(lái)顯示自己。
• 本示例中的body的widget樹中包含了一個(gè)Center widget, Center widget又包含一個(gè) Text 子widget。 Center widget可以將其子widget樹對(duì)其到屏幕中心。

基礎(chǔ)以上最簡(jiǎn)單的示例，在我們構(gòu)建用戶列表這個(gè)app時(shí)，首先主體結(jié)構(gòu)和hello world例子并無(wú)差異，如下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() ); } } 

頁(yè)面的主體內(nèi)容是一個(gè)ListView，ListView里每個(gè)ListItem又是一個(gè)復(fù)雜Widget，采用Row和Column的布局容器即可實(shí)現(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(){ //列表來(lái)自http請(qǐng)求 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語(yǔ)言平時(shí)接觸不多，可以在官網(wǎng)：https://flutter.io/docs/get-started/install 找到更多學(xué)習(xí)材料，阿里技術(shù)公眾號(hào)中有一篇更深入講解Flutter的文章：《深入理解Flutter的編譯原理與優(yōu)化》

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

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

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