1. <div id="f8mbs"></div>
        您好,欢迎来到源码搜藏网!分享精神,快乐你我!
        [加入VIP] 设为首页 | 收藏本站 | 网站地图 | Sitemap | TAG标签
      2. 首 页
      3. 在线工具
      4. jquery手册
      5. 当前位置:首页 > 安卓源码 > 技术博客 >

        跨平台开发框架 Flutter 很凶猛 势逼 React Native

        时间:2019-03-28 08:29 来源:互联网 作者:源码搜藏 浏览:收藏 挑错 推荐 打印

        Flutter 的 2019 很是精彩: 声网开源了 Flutter 实时音视频插件 Agora Flutter SDK; 闲鱼开源了 Flutter 应用框架 Fish Redux; 今日头条即将开源能让 Flutter 真正支持 View 级别混合开发的方案 从 2016 年项目启动,到在次年的 Google I/O 大会上首次公

        Flutter 的 2019 很是精彩:

        声网开源了 Flutter 实时音视频插件 Agora Flutter SDK;

        闲鱼开源了 Flutter 应用框架 Fish Redux;

        今日头条即将开源能让 Flutter 真正支持 View 级别混合开发的方案……

        从 2016 年项目启动,到在次年的 Google I/O 大会上首次公开亮相,再到 2018 年底凭借

        1.0 正式版

        的推出首页“屠版”,Flutter 几经周折,终是再度回归?#21040;?#20851;注的焦点。作为 Google 推出的移动 UI 框架,Flutter 可以快速在 iOS 和 Android 上构建高质量的原生用户界面;可以与现有的代码一起工作。在全世界,Flutter 正在被越来越多的开发者和组织使用,同?#36924;?#36824;是完全免费、开源的。那么?#29616;?#20854;他主流框架,其“个?#32034;?#21147;”何在?而秉承“一切皆为组件”这一核心理念的 Flutter 又有哪些令人惊艳的常用组件呢?

        接下来,我们将带着问题,在捷智云视频会议系统联合创始人亢少军的《Flutter 技术入门与实战》一书中寻找答案。

        ?#27426;系?#20195;的跨平台技术

        如今,主流的移动开发平台当属 Android 和 iOS,每个平台上的开发技术不太一样,针对每个平台开发应用需要特定的人员,但这样一来开发效?#23454;?#19979;,因而需要进行跨平台开发。跨平台技术从最开始的 Hybrid 混合开发技术,到 React Native 的桥接技术,一直在演进。

        Hybrid 开发主要?#35272;?#20110; WebView。但 WebView 是一个重量级的控件,很容易产生内存问题,而且复杂的 UI 在 WebView 上显示的性能不好。

        而 React Native 技术则抛开了 WebView,利用 JavaScript Core 来做桥接,将 JavaScript 调用转为 Native 调用。React Native 最终会生成对应的自定义原生控件。这种策略将框架本身和 App 开发者绑在系统的控件上,不仅框架本身需要处理大量平台相关的逻辑,随着系统版本变化和 API 的变化,开发者可能也需要处理不同平台的差异,甚至有些特性只能在部分平台上实现,这样使得跨平台特?#28304;?#25171;折扣。

        Flutter 是最新的跨平台开发技术,可以横跨 Android、iOS、MacOS、Windows、Linux 等多个系统。其采用了更为彻底的跨平台方案,即自己实现了一套 UI 框架,然后直接在 GPU 上渲染 UI 页面。

        一切皆为组件

        Flutter 里有一个非常重要的核心理念:一切皆为组件(Widget),Flutter 所有的元素皆由组件组成。比如:一个布局元素、一个动画、一个装饰效果等。

        组件是 Flutter 应用程序用户界面的基本构建块。不仅按钮、输入框、卡片、列表这些内容可作为 Widget,甚至将布局方式、动画处理都视为 Widget。所以 Flutter 具有一致的统?#27426;?#35937;模型:Widget。

        Widget 具有丰富的属性及方法,属性通常用来改变组件的状态(颜色、大小等)及回调方法的处理(单击事件回调、手势事件回调等)。方法主要是提供一些组件的功能扩展。

        复杂的功能界面通常都是由一个一个简单功能的组件组装完成的。有的组件负责布局,有的负责定位,有的负责调整大小,有的负责渐变处理,等等。这?#26234;?#22871;组合的方式带来的最大好处就是解耦。

        下面将列举并讲解部分开发中用得最为频繁的组件。

        容器组件

        容器组件(Container)包含一个子 Widget,自身具备如 alignment、 padding 等基础属性,方便布局过程中摆放 child。Container 组件常用属性见下表:

        跨平台开发框架 Flutter 很凶猛 势逼 React Native

        Container 组件的属性及描述

        | 提示:padding 与 margin 的不同之处在于,padding 是包含在 Content 内,而 margin 则是外部边界。设置点击事件的话,padding 区域会响应,而 margin 区域不会响应。

        import 'package:flutter/material.dart';
        void main() => runApp(MyApp());
        class MyApp extends StatelessWidget {
         @override
         Widget build(BuildContext context) {
         return MaterialApp(
         title: '容器组件示例',
         home: Scaffold(
         appBar: AppBar(
         title: Text('容器组件示例'),
         ),
         body: Center(
         //添加容器
         child: Container(
         width: 200.0,
         height: 200.0,
         //添加边框装饰效果
         decoration: BoxDecoration(
         color: Colors.white,
         //设置上下左右四个边框样式
         border: new Border.all(
         color: Colors.grey, //边框颜色
         width: 8.0, //边框粗细
         ),
         borderRadius:
         const BorderRadius.all(const Radius.circular(8.0)), //边框的弧度
         ),
         child: Text(
         'Flutter',
         textAlign: TextAlign.center,
         style: TextStyle(fontSize: 28.0),
         ),
         ),
         ),
         ),
         );
         }
        }
        

        上述示例代码视图展现大致如下图所示:

        跨平台开发框架 Flutter 很凶猛 势逼 React Native

         

        图片组件

        图片组件(Image)是显示图像的组件,Image 组件有多种构造函数:

        • new Image:从 ImageProvider 获取图像
        • new Image.asset:加载资源图片
        • new Image.file:加载本地图片文件
        • new Image.network:加载网络图片
        • new Image.memory:加载 Uint8List 资源图片

        Image 组件常见属性见下表:

        跨平台开发框架 Flutter 很凶猛 势逼 React Native

         

        Image 组件属性及描述

        文本组件

        文本组件(text)负责显示文本和定义显示样式,常用属性见下表。

        跨平台开发框架 Flutter 很凶猛 势逼 React Native

         

        Text 组件属性及描述

        接下?#27425;?#20204;通过创建多个文本组件来展示不同的文本样式。比如不同的颜色、不同的字号、不同的线形等,完整示例代码如下:

        import 'package:flutter/material.dart';
        class ContainerDemo extends StatelessWidget {
         @override
         Widget build(BuildContext context) {
         return new Scaffold(
         appBar: new AppBar(
         title: new Text('文本组件'),
         ),
         body: new Column(
         children: <Widget>[
         new Text(
         '红色+黑色删除线+25号',
         style: new TextStyle(
         color: const Color(0xffff0000),
         decoration: TextDecoration.lineThrough,
         decorationColor: const Color(0xff000000),
         fontSize: 25.0,
         ),
         ),
         new Text(
         '橙色+下划线+24号',
         style: new TextStyle(
         color: const Color(0xffff9900),
         decoration: TextDecoration.underline,
         fontSize: 24.0,
         ),
         ),
         new Text(
         '虚线上划线+23号+倾斜',
         style: new TextStyle(
         decoration: TextDecoration.overline,
         decorationStyle: TextDecorationStyle.dashed,
         fontSize: 23.0,
         fontStyle: FontStyle.italic,
         ),
         ),
         new Text(
         '24号+加粗',
         style: new TextStyle(
         fontSize: 23.0,
         fontStyle: FontStyle.italic,
         fontWeight: FontWeight.bold,
         letterSpacing: 6.0,
         ),
         ),
         ],
         ),
         );
         }
        }
        void main() {
         runApp(
         new MaterialApp(
         title: 'Text demo',
         home: new ContainerDemo(),
         )
         );
        }
        

        上述示例代码视图展现大致如下图:

        跨平台开发框架 Flutter 很凶猛 势逼 React Native
        跨平台开发框架 Flutter 很凶猛 势逼 React Native转载<\/script>' );
        辽宁十一选五单双