如果你有移动端开发经验，无论你是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 {
// 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 {
// 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 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 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 {
List _points = [];
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"),
);
}
由于篇幅过长，文章将分为多部分，请继续关注本文其他部分。