Flutter 对 iOS、Android(双端开发者)的快速理解(一)

96
TryEnough
1.1 2019.01.29 17:56 字数 1058

原文链接

更多教程


如果你有移动端开发经验,无论你是iOS还是Android开发者,你都可以利用现有的知识快速理解Flutter开发。
本文会通过对比双端开发和Flutter中的差异来说明。

Flutter中用 Widget 表示(iOS中的UIView)和(Android中的View)

Flutter中使用 Widget 表示双端开发中的view概念。就像双端中的view一样,它也可以包含其他的Widget部件。

区别是:

  • Flutter中当 widgets 和它们的状态被改变时,Flutter 会构建一颗新的 widgets 树。不像 UIView,由于不可变性,Flutter 的 widgets 非常轻量。
  • iOS中UIView在改变时并不会被重新创建,直到使用 setNeedsDisplay() 之后才会被重新绘制。
  • Android上View在改变时并不会被重新创建,直到调用invalidate时才会重绘。

Flutter中通过StatefulWidget更新widget状态

  • iOS和android中可以直接修改UIView或View的属性值,达到改变状态的目的
  • Flutter中通过使用StatefulWidget来修改widget状态

那么什么是StatefulWidget呢?

Fullter中有两种Widget,有状态的StatefulWidget和无状态的StatelessWidget。

  • StatefulWidget 拥有一个 State 对象来存储它的状态数据,通过改变State 对象的值来修改StatefulWidget的UI表现。
  • StatelessWidget 正如它听起来一样,是一个没有附加状态的 widget。例如在运行时不会改变的logo图片,就可以在 StatelessWidget 来表示。

举个例子将一个不可变状态的widget变成一个有状态的widget:

Text(
  'I like Flutter!',
  style: TextStyle(fontWeight: FontWeight.bold),
);

这个Text widget 并不携带其他状态。它通过传入给它的构造器的数据来渲染。当希望通过用户点击来修改这个Text的值时,可以用 StatefulWidget 包裹 Text widget,并在用户点击按钮时更新它。

class SampleApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SampleAppPage(),
    );
  }
}

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

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

class _SampleAppPageState extends State<SampleAppPage> {
  // Default placeholder text
  String textToShow = "I Like Flutter";
  void _updateText() {
    setState(() {
      // update the text
      textToShow = "Flutter is Awesome!";
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Sample App"),
      ),
      body: Center(child: Text(textToShow)),
      floatingActionButton: FloatingActionButton(
        onPressed: _updateText,
        tooltip: 'Update Text',
        child: Icon(Icons.update),
      ),
    );
  }
}

Flutter中通过Widget树来绘制界面

  • iOS中通过代码或者storyboard、xib绘制界面
  • android通过XML编写布局
  • Flutter中通过Widget树来绘制界面

举个例子:在屏幕上显示一个简单的Widget并添加一些padding。

@override
Widget build(BuildContext context) {
  return new Scaffold(
    appBar: new AppBar(
      title: new Text("Sample App"),
    ),
    body: new Center(
      child: new MaterialButton(
        onPressed: () {},
        child: new Text('Hello'),
        padding: new EdgeInsets.only(left: 10.0, right: 10.0),
      ),
    ),
  );
}

Flutter中如何动态添加或删除 Widget

  • 在Android中,您可以从父级控件调用addChild或removeChild以动态添加或删除View。
  • 在 iOS 中,你在父 view 中调用 addSubview() 或在子 view 中调用 removeFromSuperview() 来动态地添加或移除子 views。
  • 在Flutter中,因为widget是不可变的,所以没有addChild。可以通过改变一个bool值,然后重绘来决定是否展示某一个控件。

例如:点击按钮显示不通的widget:


代码如下:

import 'package:flutter/material.dart';

void main() {
  runApp(new SampleApp());
}

class SampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Sample App',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new SampleAppPage(),
    );
  }
}

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

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

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

  _getToggleChild() {
    if (toggle) {
      return new Text('1111111');
    } else {
      return new MaterialButton(onPressed: () {}, child: new Text('2222222'));
    }
  }

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

Flutter如何使用动画

  • 在 iOS 中,你通过调用 animate(withDuration:animations:) 方法来给一个 view 创建动画。
  • 在Android中,您可以通过XML创建动画或在视图上调用.animate()。
  • 在Flutter中,使用动画库来包裹 widgets,而不是创建一个动画 widget。
    在 Flutter 中,使用 AnimationController 来控制动画暂停、寻找、停止、反转动画等。
    使用Animation类的扩展例如CurvedAnimation 来实现一个 interpolated 曲线。

举例:
点击右下角按钮,淡出图标:


代码:

import 'package:flutter/material.dart';

void main() {
  runApp(new FadeAppTest());
}

class FadeAppTest extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Fade Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyFadeTest(title: 'Fade Demo'),
    );
  }
}

class MyFadeTest extends StatefulWidget {
  MyFadeTest({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyFadeTest createState() => new _MyFadeTest();
}

class _MyFadeTest extends State<MyFadeTest> with TickerProviderStateMixin {
  AnimationController controller;
  CurvedAnimation curve;

  @override
  void initState() {
    controller = new AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this);
    curve = new CurvedAnimation(parent: controller, curve: Curves.easeIn);
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
          child: new Container(
              child: new FadeTransition(
                  opacity: curve,
                  child: new FlutterLogo(
                    size: 100.0,
                  )))),
      floatingActionButton: new FloatingActionButton(
        tooltip: 'Fade',
        child: new Icon(Icons.brush),
        onPressed: () {
          controller.forward();
        },
      ),
    );
  }
}

Flutter如何绘图?

  • 在 iOS 上,你通过 CoreGraphics 来在屏幕上绘制线条和形状。
  • 在Android中,您可以使用Canvas在屏幕上绘制自定义形状。
  • 在Flutter中,CustomPaint 和 CustomPainter 这两个类来帮助你绘图。

举例:


代码

import 'package:flutter/material.dart';

class SignaturePainter extends CustomPainter {
  SignaturePainter(this.points);

  final List<Offset> points;

  void paint(Canvas canvas, Size size) {
    Paint paint = new Paint()
      ..color = Colors.black
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 5.0;
    for (int i = 0; i < points.length - 1; i++) {
      if (points[i] != null && points[i + 1] != null)
        canvas.drawLine(points[i], points[i + 1], paint);
    }
  }

  bool shouldRepaint(SignaturePainter other) => other.points != points;
}

class Signature extends StatefulWidget {
  SignatureState createState() => new SignatureState();
}

class SignatureState extends State<Signature> {
  List<Offset> _points = <Offset>[];

  Widget build(BuildContext context) {
    return new Stack(
      children: [
        GestureDetector(
          onPanUpdate: (DragUpdateDetails details) {
            RenderBox referenceBox = context.findRenderObject();
            Offset localPosition =
            referenceBox.globalToLocal(details.globalPosition);

            setState(() {
              _points = new List.from(_points)..add(localPosition);
            });
          },
          onPanEnd: (DragEndDetails details) => _points.add(null),
        ),
        CustomPaint(painter: new SignaturePainter(_points))
      ],
    );
  }
}

class DemoApp extends StatelessWidget {
  Widget build(BuildContext context) => new Scaffold(body: new Signature());
}

void main() => runApp(new MaterialApp(home: new DemoApp()));

Flutter如何创建自定义的 widgets?

  • iOS和android都是通过继承view来实现的。
  • Flutter是通过组合现有的widget来实现复杂的 widget。

举个例子,如果你要构建一个 CustomButton ,并在构造器中传入它的 label?那就组合 RaisedButton 和 label,而不是扩展 RaisedButton。

class CustomButton extends StatelessWidget {
  final String label;

  CustomButton(this.label);

  @override
  Widget build(BuildContext context) {
    return RaisedButton(onPressed: () {}, child: Text(label));
  }
}

然后就像你使用其他任何 Flutter 的 widget 一样,使用你的 CustomButton:

@override
Widget build(BuildContext context) {
  return Center(
    child: CustomButton("Hello"),
  );
}

由于篇幅过长,文章将分为多部分,请继续关注本文其他部分。

原文链接

更多教程

Flutter
Web note ad 1