谈谈我对 Flutter 发展前景 和 “嵌套地狱” 的浅显看法
历史上的今天
郑成功(1624.08.26-1662.06.23),本名森,又名福松,字明俨、大木。福建泉州南安人,祖籍河南固始。汉族,明末清初军事家,抗清名将,民族英雄。其父郑芝龙,其母名田川氏。弘光时监生,因蒙隆武帝赐明朝国姓“朱”,赐名成功,并封忠孝伯,世称“郑赐姓”、“郑国姓”、“国姓爷”,又因蒙永历帝封延平王,称“郑延平”。
1645年(清顺治二年,弘光元年)清军攻入江南,不久郑芝龙降清、田川氏在乱军中自尽;郑成功率领父亲旧部在中国东南沿海抗清,成为南明后期主要军事力量之一,一度由海路突袭、包围清江宁府(原明朝南京),但终遭清军击退,只能凭借海战优势固守泉州府的海岛厦门、金门。1661年(清顺治十八年,永历十五年)率军横渡台湾海峡,翌年击败荷兰东印度公司在台湾大员(今台湾台南市境内)的驻军,收复台湾,开启郑氏在台湾的统治 。
正文
Flutter 发展前景
提到 Flutter 就不得不提到 Fuchsia 系统,这是一个尚未正式发布的操作的系统,引用 Android 和 Chrome 的高级副总裁 Hiroshi Lockheimer 在一档播客节目中对 Fuchsia 的介绍是:
不仅仅是手机和个人电脑,在物联网的世界里,越来越多的设备需要操作系统、新的软件运行环境等支持。我认为,在具有不同优势和专业化的诸多操作系统中还存在很大的发展空间。Fuchsia 就是其中之一,所以,请继续保持关注。
是的,Fuchsia 系统是为物联网研发的操作系统,物联网简称 IoT。
那 Flutter 和 Fuchsia 又是什么关系呢?
Flutter 是 Fuchsia 官方指定的唯一UI开发语言。
目前市面上有很多物联网操作系统 ,Fuchsia 就一定可以脱颖而出吗?
未来的事谁说的准呢,这里引用 Google 公众号底部的一句话送给大家:
预测未来不如创造未来
在跨平台技术上 Flutter 还有很多竞争对手,比如 HTML5、React Native、Weex、快应用、小程序等,在【Flutter实战】移动技术发展史 中详细说明了各个跨平台技术的发展历史及优缺点。
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 发展贡献做出一点微不足道的贡献。
- UVA Machined Surfaces
- NBUT 1117 Kotiya's Incantation
- React第三方组件1(路由管理之Router的使用④按需加载-上)
- React第三方组件1(路由管理之Router的使用③传参)
- Kindergarten Counting Game
- React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)
- 括号配对问题描述输入输出样例输入样例输出解析代码实现运行结果参考链接
- React第三方组件1(路由管理之Router的使用①简单使用)
- POj 2253 Frogger
- React项目配置7(ES7的Async/Await的使用)
- HDU 1863 畅通工程
- 最小生成树判断唯一
- React项目配置5(引入MockJs,实现假接口开发)
- POj 1611 The Suspects
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 备战 618,用 Python 领取京东优惠券
- 一键生成你的微信社交数据报告
- 分析OutOfMemoryError异常
- 用 Python 制作关不掉的端午安康弹窗
- 使用JFR分析性能问题
- MyISAM 迁移至 InnoDB方案
- 解决Seafile局域网访问失败
- 一键解锁网易云音乐变灰歌曲
- 彻底理解 IO多路复用
- 分享Apache环境禁止目录浏览的方法
- DB2 Linux平台安装 Part 1 Linux环境配置
- DB2 Linux平台安装 Part 2 单机版软件安装
- DB2 Linux平台安装 Part 3 实例的建立与配置
- C++核心准则Con.2:默认情况下,将成员函数定义为const类型
- C++核心准则Con.3:默认情况下,传递参照常量的指针或引用