iOS Flutter 开发基础(一)

Flutter简介

Flutter是Google的移动应用程序SDK,在2018世界移动大会上,Google发布了Flutter的第一个Beta版本。其目的在于极其高效地内在iOS和Android上构建高质量的原生应用。在其官方首页中提到Flutter的三大特性:
(1)Fast Development:可以使用热重载,丰富的可自定义的控件帮助开发者在几分钟内构建本地接口;
(2)Expressive and Flexible UI:专注于原生用户体验。分层架构允许完全自定义,从而实现令人难以置信的快速渲染和表现力和灵活的设计。
(3)Native Performance:Flutter包含所有重要的平台具有差异的控件,如滚动,导航,图标和字体,以在iOS和Android上提供完整的本机性能。
与RN相比,Flutter的范式与其相似,都是通过构建控件树交给操作系统进行渲染从而转化为平台的控件对象。区别在于RN所能转化的控件对象会受到平台局限性的影响,该影响会造成同样一份RN代码在不同平台会渲染出不同的界面效果,为了保证与设计的一致性,可能会写两套代码。而Flutlter因为是使用自身的渲染引擎去渲染,可以提供几乎完全的一致性,并且其性能也较为突出。

Dart

Dart语言是Flutter的编程语言,由谷歌开发的用于于web、服务器、移动应用和物联网等领域的开发,其基本信息都百度得到。它是Flutter争议较大的一部分原因,虽然上手较快,但用于写嵌套的Widget Tree会非常麻烦并且可读性差,对于开发者很不友好。至于为啥现在强推这个,估计是Dart姓G不姓O吧。

Flutter环境搭建——macOS

流程官网都在https://flutter.io/setup-macos/给你写好了,主要流程就是下载SDK,配置环境变量,安装IDE,设置模拟器。下面内容以macOS环境为例,大致介绍如何搭建Flutter环境。
1.下载SDK
https://flutter.io/sdk-archive/#macos上下载SDK,然后打开你的终端,喜欢双击解压也行。

$ cd ~/development
$ unzip ~/Downloads/flutter_macos_v0.3.2-beta.zip

解压完成后就是配置环境变量了

$ export PATH=`pwd`/flutter/bin:$PATH

2.运行Flutter doctor
完成了Flutter SDK的下载和环境变量配置后,我们需要运行Flutter doctor来查看我们还需要安装哪些依赖来完成Flutter的安装。
当完成所有依赖和工具安装时,会如下显示:


No issues!

下载Xcode 和 Android Studio 就不再描述。特别需要注意的分别是Xcode还需要安装libimobiledevice以及Android Studio安装Flutter的插件。
下面我们就可以打开Android Studio来进行开发啦~

Hello world

1)打开Android Studio 新建一个Flutter项目。


New Flutter Project

2)以iOS开发为例,手动启动一个模拟器或者在终端中执行。

$ open -a Simulator

启动后我们会发现Android Studio已经识别到你启动的模拟器了。


找到你了!

3)运行我们的Flutter项目,显示如下:


Simulator Screen Shot

点击“+”按钮,中间的数字就会变化并反映我们点击该按钮的次数。然后我们再看看main.dart这个类,我们把当中的文本内容'You have pushed the button is pushed this many times:'更改为'Hello world:'然后cmd-s保存。并不用经过重新运行,模拟器中的文本已经发生了改变。


Simulator Screen Shot

在见证了Fast Development后我们可以再进一步进行一些尝试了。
4)创建你自己的首页
我们先把刚才修改了的main.dart里面现有的代码删掉,替换成下面这些:

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'),
        ),
      ),
    );
  }
}

保存后刚才的文本内容和按钮就都不在了,只剩下了“Hello World”。
5)使用一个外部包。
接下来我们要引入并使用一个外部包,用它来生成单词把老掉牙的“Hello World”替换掉。在Flutter中是使用pubspec文件来进行资源的管理,打开pubspec.yaml文件并将english_words加入到依赖列表中,然后点击Flutter commands 中的“Packages get”按钮,静静地等待外部包安装完成。

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.0
  english_words: ^3.1.0
Packages get

安装完成如上显示

然后我们在main.dart中import该外部包将以下部分的代码进行修改:

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';


void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final wordPair = new WordPair.random();//添加对随机单词的生成
    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'),
          child: new Text(wordPair.asPascalCase),//显示生成的随机单词
        ),
      ),
    );
  }
}

保存后我们的“Hello World”就被替换掉啦。


Simulator Screen Shot

以上便是我们如何在macOS上搭建Flutter开发环境以及对该框架的初次体验。后面我们将会进一步了解flutter开发的基础内容,包括控件和页面跳转以及事件等内容。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容