Flutter和iOS上一些概念的对比

flutter作为移动开发创建应用的新方式,和iOS开发相比起来还是有一些区别的,这篇文章挑几个容易混淆的点来说明。

重点:Flutter一定要记住:万物皆widget!


views和widget

在iOS开发中,我们每天接触最多的就是各种控件,UIViwe,UIButton,UIImageview等等。其中UIView是最基本的界面组成单位,继承自UIResponder,承担了界面显示和用户交互的作用,像按钮,图片,输入框等UIView的大量子类也为我们提供了快速构建界面的便利。他们具有添加子视图(addsubview)的方法来容纳其他的view,最终构成我们想要的界面。

在Flutter当中,在UI的创建方式上面你可以把widget想象成和UIViwe一样的作用。你可以想象一个APP页面是有不同的widget来组成的,导航栏是widget,图片是widget,cell是widget,按钮也是widget。

但是widget又和UIViwe不同。

1 生命周期不同,UIview创建后你可以通过setNeedsDisplay来实现自身的重绘,而当widget改变时候,Flutter 会通过setstate构建一颗新的 widgets 树。

2widget概念更广。widget是一种UI界面的创建方式,也可以是布局的方式(Row,Column等),也可以负责用户交互(GestureDetector),也可以负责APP的样式,也可以管理动画,真的是万物皆widget。

自定义和组合

在iOS开发当中,如果系统的组件不能满足设计师的要求,我们通常会继承该控件,在当中做一些工作来实现自己的需求。

在Flutter当中,面对设计师精美个性的UI,我们更多的是利用各种基础的widge通过各种方式组合到一起来合成一个更大的widget。(因为widget本身是没有任何具体的UI形态的)。举个例子,Container是一个常用的widget, 由多个widget组成,这些widget负责布局、绘制、定位和调整大小。具体来说,Container由 LimitedBox、 ConstrainedBox、 Align、 Padding、DecoratedBox、 和Transform组成。 您可以用各种方式组合这些以及其他简单的widget,而不是继承。

ViewController与Flutter

前面我们已经提过,iOS开发中,界面是由大量的UIView构建的,通常情况下,我们习惯于每一个独立的界面交付给一个ViewController来管理,每一个ViewController持有UIView并且负责管理。

在Flutter当中是没有控制器的概念的,ViewController起到的作用同样有widget来承担,万物皆widget,你可以想象一个Flutter开发的APP的每一个界面都是大大小小的widget。

更新视图的对比

iOS中,我们想要更新视图的话我们是直接操作视图本身的,比如我们想要改变UIView的颜色,我们直接.color= ,我们改变视图的大小,直接操纵他们的frame。但是在Flutter当中,widgets 是不可变的,而且不能被直接更新。你需要去操纵 widget 的 state。利用setstate方法通知Flutter去改变这个widget的状态。

widget分为StatelessWidget(无状态)和StatefulWidget(有状态)两大类,无状态StatelessWidget的widget一旦创建就不可改变,适用于一些固定死的文案,icon,图标。有状态StatefulWidget的widget则适用于一些显示什么取决于后台数据的视图(widget)。通常情况下,我们取到http请求回来的数据后,通过调用改widget的setstate方法,把要改变的状态赋值,Flutter就会重绘widget树。

处理用户交互

在iOS中,我们处理用户交互大概分为两大类,1是直接创建继承自UIControl的控件,例如按钮UIButton, 输入框等等,2是想UIImageview这类控件我们会通过添加手势的方式来处理用户交互。

Flutter中,也有封装好的Button类,例如RaisedButton,FlatButton,CupertinoButton,他们有onPress的方法,你可以实现这个来完成。如果是Container,Text,Image这类,通常我们会在外面再包一个GestureDetector手势widget,把我们想要有交互功能的控件作为GestureDetector的child,再实现onTap方法来实现,例子如下


GestureDetector(

  onTap: () {

    setState(() { _lights = true; });

  },

  child: Container(

    color: Colors.yellow,

    child: Text('TURN LIGHTS ON'),

  ),

)

addSubview()和removeFromSuperview()

在iOS中我们很多时候会在父 view 中调用 addSubview() 或在子 view 中调用 removeFromSuperview() 来动态地添加或移除子 views。
Flutter中,因为widget不可变属性,没有相应的添加或者移除视图的方法。作为替代,你可以向 parent 传入一个返回 widget 的函数,并用一个布尔值来控制子 widget 的创建。这种设计,也导致了在Flutter开发过程中有着大量的开关存在。例子如下:

class SampleAppPage extends StatefulWidget {
  SampleAppPage({Key key}) : super(key: key);

  @override
  _SampleAppPageState createState() => _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  // Default value for toggle
  bool toggle = true;
  void _toggle() {
    setState(() {
      toggle = !toggle;
    });
  }

  _getToggleChild() {
    if (toggle) {
      return Text('Toggle One');
    } else {
      return CupertinoButton(
        onPressed: () {},
        child: Text('Toggle Two'),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Sample App"),
      ),
      body: Center(
        child: _getToggleChild(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _toggle,
        tooltip: 'Update Text',
        child: Icon(Icons.update),
      ),
    );
  }
}

...继续填坑中

参考资料:https://flutterchina.club/flutter-for-ios/#flutter-for-ios-%E5%BC%80%E5%8F%91%E8%80%85

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

推荐阅读更多精彩内容