原文链接

更多教程

如果你有移动端开发经验，无论你是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.@overrideWidget 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 textString textToShow = "I Like Flutter";void _updateText() {setState(() {// update the texttextToShow = "Flutter is Awesome!";});}@overrideWidget 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 {@overrideWidget 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 togglebool toggle = true;void _toggle() {setState(() {toggle = !toggle;});}_getToggleChild() {if (toggle) {return new Text('1111111');} else {return new MaterialButton(onPressed: () {}, child: new Text('2222222'));}}@overrideWidget 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.@overrideWidget 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;@overridevoid initState() {controller = new AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);curve = new CurvedAnimation(parent: controller, curve: Curves.easeIn);}@overrideWidget 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);@overrideWidget build(BuildContext context) {return RaisedButton(onPressed: () {}, child: Text(label));}
}
复制代码

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

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

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

原文链接

更多教程