View 在 Flutter 中对应什么？
对应的是 Widget，一种声明和构建 UI 的方式。
特点
- Widget 仅存在于每一帧之间。当 Widget 或其状态需要改变刷新时，都会重新创建实例以生成新的 Widget 实例树；
- 不可变，轻量级。不可变是轻量级的部分原因，Widget 不是视图，也不绘制，仅对实际视图中的对象进行描述；
- 灵活且富有表现力的设计语言。 可以实现任何设计语言，如遵循 Material Design 设计标准且支持所有平台的 Material 组件库；类似 iOS 设计风格的 Cupertino widgets 等。
如何更新 Widget ？
Widget 本身不可变且不能直接更新，只能通过修改 Widget 的状态来达到效果（间接更新：重新构建需要改变的 Widget 以替代原来的）。
由此引申出：
StatelessWidget：无状态，如显示只加载一次的 Logo。
StatefulWidget：有状态，如时常请求网络数据更新页面。
不同点：
StatefulWidget 含有一个可跨帧存取数据的 State 对象。
Widget 可变化，则是有状态的。但子 Widget 是有状态的，其父 Widget 仍可以是 StatelessWidget 。
如何布局 Widget ？
通过 Widget 树实现。
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Sample App"),
),
body: Center(
child: MaterialButton(
onPressed: () {},
child: Text('Hello'),
padding: EdgeInsets.only(left: 10.0, right: 10.0),
),
),
);
}
可在 Flutter 提供的 Widget 目录 查看相关布局。
如何从布局中移除或添加组件 ？
Flutter 没有类似 addChild() 这种方法，但可通过控制 boolean 类型的标志，来创建显示不同 Widget。
import 'package:flutter/material.dart';
void main() {
runApp(SampleApp());
}
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 value for toggle
bool toggle = true;
void _toggle() {
setState(() {
toggle = !toggle;
});
}
_getToggleChild() {
if (toggle) {
return Text('Toggle One');
} else {
return MaterialButton(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),
),
);
}
}
如何让 Widget 产生动画 ？
通过 animation 库中的动画 Widget 包裹 Widget 。
使用 Animation<double> 子类 AnimationController 控制动画 pause、seek、stop 、reverse 。
淡入淡出动画举例：
import 'package:flutter/material.dart';
void main() {
runApp(FadeAppTest());
}
class FadeAppTest extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Fade Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyFadeTest(title: 'Fade Demo'),
);
}
}
class MyFadeTest extends StatefulWidget {
MyFadeTest({Key key, this.title}) : super(key: key);
final String title;
@override
_MyFadeTest createState() => _MyFadeTest();
}
class _MyFadeTest extends State<MyFadeTest> with TickerProviderStateMixin {
AnimationController controller;
CurvedAnimation curve;
@override
void initState() {
super.initState();
controller = AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);
curve = CurvedAnimation(parent: controller, curve: Curves.easeIn);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Container(
child: FadeTransition(
opacity: curve,
child: FlutterLogo(
size: 100.0,
)))),
floatingActionButton: FloatingActionButton(
tooltip: 'Fade',
child: Icon(Icons.brush),
onPressed: () {
controller.forward();
},
),
);
}
}
更多参阅 Animation & Motion widgets，Animations tutorial，Animations overview。
如何使用 Canvas 绘制 ？
与 Android 拥有类似的 Canvas API，因为都是基于低级渲染引擎 Skia 。
两个相关类：
- CustomPaint：
- CustomPainter：通过实现自定义的算法来绘制（implements your algorithm to draw to the canvas）。
可到 StackOverflow 查看 Collin 关于签名绘制的回答。
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: DemoApp()));
class DemoApp extends StatelessWidget {
Widget build(BuildContext context) => Scaffold(body: Signature());
}
class Signature extends StatefulWidget {
SignatureState createState() => SignatureState();
}
class SignatureState extends State<Signature> {
List<Offset> _points = <Offset>[];
Widget build(BuildContext context) {
return GestureDetector(
onPanUpdate: (DragUpdateDetails details) {
setState(() {
RenderBox referenceBox = context.findRenderObject();
Offset localPosition =
referenceBox.globalToLocal(details.globalPosition);
_points = List.from(_points)..add(localPosition);
});
},
onPanEnd: (DragEndDetails details) => _points.add(null),
child: CustomPaint(painter: SignaturePainter(_points), size: Size.infinite),
);
}
}
class SignaturePainter extends CustomPainter {
SignaturePainter(this.points);
final List<Offset> points;
void paint(Canvas canvas, Size size) {
var paint = 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;
}
如何自定义 Widget ？
通过组合粒度更小的 Widget ，而非继承。
class CustomButton extends StatelessWidget {
final String label;
CustomButton(this.label);
@override
Widget build(BuildContext context) {
return RaisedButton(onPressed: () {}, child: Text(label));
}
}
@override
Widget build(BuildContext context) {
return Center(
child: CustomButton("Hello"),
);
}
原文给 Android 开发者的 Flutter 指南，参考 Android 开发者参考。
此文目的：仅与 Android 对比，尽可能言简意骇的翻译，且不遗漏、不曲解词义。
