Flutter 未來發展
提到 Flutter 就不得不提到 Fuchsia 系統，這是一個尚未正式發布的操作的系統，引用 Android 和 Chrome 的高級副總裁 Hiroshi Lockheimer 在一檔播客節目中對 Fuchsia 的介紹是：
不僅僅是手機和個人電腦，在物聯網的世界里，越來越多的設備需要操作系統、新的軟件運行環境等支持。我認為，在具有不同優勢和專業化的諸多操作系統中還存在很大的發展空間。Fuchsia 就是其中之一，所以，請繼續保持關注。
是的，Fuchsia 系統是為物聯網研發的操作系統，物聯網簡稱 IoT，現在全世界都在押注 IoT，包括華為、小米等國內公司。
那 Flutter 和 Fuchsia 又有什麼關係呢？
Flutter 是 Fuchsia 官方指定的唯一UI開發框架。
現在有很多物聯網操作系統 ，Fuchsia 就一定可以脫穎而出嗎？
不一定，未來的事情誰說的准呢，但在我看來 Fuchsia 是最有可能發展起來的物聯網操作系統，因為一個操作系統的發展除了本身優秀以外，最大的阻礙其實是生態，而 Fuchsia 在生態方面具有天然的優勢， 國外的一篇報道曾說：
Google 希望將 Android App 無縫移植到 Fuchsia 上，而且一直在做相關工作。
試想一下，一旦 Google 將 Android App 無縫移植到 Fuchsia 上，其他物聯網操作系統如何與之抗衡。
這裏引用 Google 公眾號底部的一句話送給大家：
預測未來不如創造未來
在跨平台技術上 Flutter 還有很多競爭對手，比如 HTML5、React Native、Weex、快應用、小程序等，我曾在跨平台技術發展簡介 中詳細說明了各個跨平台技術的發展歷史及優缺點。
Flutter 的出現會終結其他跨平台技術？我想不會的， React Native 發展了這麼多年也沒有完全乾掉 HTML5，應為 HTML5 有其獨特的應用場景，比如 營銷活動場景、新聞或者博客詳情頁面等，這些場景非常適合 HTML5。因此 Flutter 也不可能終結其他跨平台技術，總結一句話就是：
未來很長一段時間，將會是跨平台技術共存的時代，但 Flutter 適用場景更為廣闊。
Flutter 嵌套地獄
現在網絡上對 Flutter 吐槽最多大概就是 Flutter “嵌套地獄”寫法了，為什麼會出現這種現象？個人認為最大的原因就是目前大部分開源的 Flutter 項目都是這種嵌套寫法（包括我自己以前也是如此），導致後來的初學者認為這麼寫沒有問題，當項目越來越複雜時，這種嵌套寫法給項目的維護帶來了巨大的挑戰。下面說說如何避免這種嵌套寫法？
比如實現如下效果：
嵌套地獄 的寫法：
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Container(
height: 45,
child: Row(
children: <Widget>[
SizedBox(
width: 30,
),
Icon(
Icons.notifications,
color: Colors.blue,
),
SizedBox(
width: 30,
),
Expanded(
child: Text('消息中心'),
),
Container(
padding: EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
shape: BoxShape.rectangle,
borderRadius: BorderRadius.all(Radius.circular(50)),
color: Colors.red),
child: Text(
'2',
style: TextStyle(color: Colors.white),
),
),
SizedBox(
width: 15,
),
],
),
),
Divider(),
//類似上面的布局寫6個
],
);
}
上面還僅僅是第一項的布局，下面還有7個，一個30多行代碼，7個就是200多行的布局代碼，這還僅僅是布局代碼，如果加上邏輯，都不敢想象啊。
或許有一點封裝思想開發者會將每一個 Item封裝為一個方法，寫法如下：
_buildItem(IconData iconData, Color iconColor, String title, Widget widget) {
return Container(
height: 45,
child: Row(
children: <Widget>[
SizedBox(
width: 30,
),
Icon(
iconData,
color: iconColor,
),
SizedBox(
width: 30,
),
Expanded(
child: Text('$title'),
),
widget,
SizedBox(
width: 15,
),
],
),
);
}
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
_buildItem(...),
Divider(),
_buildItem(...),
Divider(),
_buildItem(...),
Divider(),
_buildItem(...),
Divider(),
_buildItem(...),
Divider(),
_buildItem(...),
Divider(),
],
);
}
這樣看起來好多了，基本解決了嵌套地獄問題，但這樣寫還存在一個非常大的問題-性能問題，一旦其中一個数字發生變化，整個頁面都要重建，Flutter 開發中非常重要的一個原則就是 盡可能少的重建組件，因此將上面封裝到方法中組件變為一個 Widget。
class SettingDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
_SettingItem(
iconData: Icons.notifications,
iconColor: Colors.blue,
title: '消息中心',
suffix: _NotificationsText(
text: '2',
),
),
Divider(),
_SettingItem(
iconData: Icons.thumb_up,
iconColor: Colors.green,
title: '我贊過的',
suffix: _Suffix(
text: '121篇',
),
),
Divider(),
_SettingItem(
iconData: Icons.grade,
iconColor: Colors.yellow,
title: '收藏集',
suffix: _Suffix(
text: '2個',
),
),
Divider(),
_SettingItem(
iconData: Icons.shopping_basket,
iconColor: Colors.yellow,
title: '已購小冊',
suffix: _Suffix(
text: '100個',
),
),
Divider(),
_SettingItem(
iconData: Icons.account_balance_wallet,
iconColor: Colors.blue,
title: '我的錢包',
suffix: _Suffix(
text: '10萬',
),
),
Divider(),
_SettingItem(
iconData: Icons.location_on,
iconColor: Colors.grey,
title: '閱讀過的文章',
suffix: _Suffix(
text: '1034篇',
),
),
Divider(),
_SettingItem(
iconData: Icons.local_offer,
iconColor: Colors.grey,
title: '標籤管理',
suffix: _Suffix(
text: '27個',
),
),
],
);
}
}
class _SettingItem extends StatelessWidget {
const _SettingItem(
{Key key, this.iconData, this.iconColor, this.title, this.suffix})
: super(key: key);
final IconData iconData;
final Color iconColor;
final String title;
final Widget suffix;
@override
Widget build(BuildContext context) {
return Container(
height: 45,
child: Row(
children: <Widget>[
SizedBox(
width: 30,
),
Icon(iconData,color: iconColor,),
SizedBox(
width: 30,
),
Expanded(
child: Text('$title'),
),
suffix,
SizedBox(
width: 15,
),
],
),
);
}
}
class _NotificationsText extends StatelessWidget {
final String text;
const _NotificationsText({Key key, this.text}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
shape: BoxShape.rectangle,
borderRadius: BorderRadius.all(Radius.circular(50)),
color: Colors.red),
child: Text(
'$text',
style: TextStyle(color: Colors.white),
),
);
}
}
class _Suffix extends StatelessWidget {
final String text;
const _Suffix({Key key, this.text}) : super(key: key);
@override
Widget build(BuildContext context) {
return Text(
'$text',
style: TextStyle(color: Colors.grey.withOpacity(.5)),
);
}
}
封裝為一個個單獨的小組件，將有變化的組件盡量單獨封裝，這樣就不會重建整個控件樹，增強了可讀性和可維護性，而且對性能有很大的提升。
最後總結一句：
雖然 Flutter 一切皆是組件，但並不代表一切都要寫在組件中。
當然這僅僅是我個人的看法，如果您有更好的方法歡迎一起討論，從我做起，規範寫法，為 Flutter 發展貢獻做出一點微不足道的貢獻。
交流
老孟Flutter博客地址（330個控件用法）：http://laomengit.com
歡迎加入Flutter交流群（微信：laomengit）、關注公眾號【老孟Flutter】：
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【其他文章推薦】
※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面
※網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!
※想知道最厲害的網頁設計公司"嚨底家"!
※幫你省時又省力,新北清潔一流服務好口碑
※別再煩惱如何寫文案,掌握八大原則!
