---

原文链接

更多教程

---

如果你有移动端开发经验，无论你是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"),
  );
}

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

原文链接

更多教程