本文是在GitHub上一个flutter项目的资料中看到的,由于原文过于太长,因此对其进行了章节拆分方便阅读,此篇为原文的部分内容,如果想查看该项目请跳转GitHub查看。
注:GitHub的这篇资料是转载的flutter中文官网的文章,这里是原文地址。
View
- Android 中的 View 在 Flutter 中对应什么?
- 如何更新 Widget ?
- 如果使用 Widget 进行布局?是否需要 XML 布局文件?
- 如何在布局中添加或移除部件?
- 在 Android 中可以使用 View.animate() 来让 View 产生动画,在 Flutter 中如何让 Widget 产生动画?
- 如何使用 Canvas 进行绘制?
- 如何构建自定义 Widget ?
Android 中的 View 在 Flutter 中对应什么?
在 Android 中,View 是用于在屏幕上显示内容的基础。 如按钮,工具栏和输入框,这些都是 View 的具体实现。在 Flutter 中对应 View 的是 Widget。然而与 View 相比 Widget 有一些不同之处。首先 Widget 实例仅存在于每一帧之间,并且在每一帧之间 Flutter 都会主动创建一棵 Widget 树用于下一帧的渲染。相比之下,在 Android 上绘制 View 的时候,除非调用invalidate
方法,否则视图不会进行重绘。
Android 中 View 是可变的,在 Flutter 中的 Widget 是不可变的。这种特性使得 Flutter 中的 Widget 变得十分轻量级。
如何更新 Widget ?
在 Android 中可以直接通过 View 来更新它们的状态。但是在 Flutter 中 Widget 是不可变的,所以不能直接通过 Widget 进行更新,如果需要更新 Widget 必须通过 State。
这里就引出了 StatefulWidget
和 StatelessWidget
两个部件。从字面理解,StatelessWidget
是没有内部状态的即不可变。而 StatefulWidget
具有状态,即是可刷新的。
当你构建的 UI 元素中有些部分是不变的,那么使用 StatelessWidget 是一个不错的选择。
例如在 Android 中你通常会将 App 的 logo 通过 ImageView 显示。而 logo 一般不会变,因此对应 Flutter 中你就可以使用 StatelessWidget 来显示你的 logo。
如果你想通过 HTTP 请求后获得的数据或用户交互来刷新 UI ,此时就需要使用 StatefulWidget 然后主动告诉 Flutter 底层 Widget 的状态发生了变化,只有如此 Flutter 才会刷新对应的 Widget。
这里有重要的一点需要注意,StatelessWidget 和 StatefulWidget 的核心内容是一致的,它们都会在每一帧中被重构,不同之处在于 StatefulWidget 有一个 State 对象,它可以为 StatefulWidget 在不同帧之间存储数据。
如果你还是有疑惑的话,只要记住如果一个 Widget 会变化,那么它就是有状态的。但是如果一个子 Widget 是有状态的,但是其父 Widget 是不可变的话父 Widget 也可以是 StatelessWidget 。
接下来看一下如何使用 StatelessWidget。Text 是一个常见的 StatelessWidget。如果查看其源码的话,会发现 Text 是 StatelessWidget 的子类
new Text(
'I like Flutter!',
style: new TextStyle(
fontWeight: FontWeight.bold,
),
);
如你所见,Text 没有任何状态信息,它仅仅是用于显示构造函数传递给它的信息。
但是如果想要通过点击一个按钮来改变 ‘I like Flutter!’ ,那该如何实现?
答案是可以使用 StatefulWidget 包裹 Text,并通过点击按钮来刷新 Text 的内容。
代码如下:
import 'package:flutter/material.dart';
void main() {
runApp(new SampleApp());
}
class SampleApp extends StatelessWidget {
// This widget is the root of your application.
@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 placeholder text
String textToShow = "I Like Flutter";
void _updateText() {
setState(() {
// update the text
textToShow = "Flutter is Awesome!";
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Sample App"),
),
body: new Center(child: new Text(textToShow)),
floatingActionButton: new FloatingActionButton(
onPressed: _updateText,
tooltip: 'Update Text',
child: new Icon(Icons.update),
),
);
}
}
如果使用 Widget 进行布局?是否需要 XML 布局文件?
在 Android 中通常使用 XML 来进行 UI 的布局,但在 Flutter 中 UI 的布局是通过在 dart 文件中构建 Widget 树来实现的。
下面是一个简单的例子用于在屏幕上居中显示一个按钮。
@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),
),
),
);
}
可以在http://doc.flutter-dev.cn/widgets/layout/ 查看 Flutter 提供的所有布局:
如何在布局中添加或移除部件?
在 Android 中,你可以通过调用父布局的 addChild 或者 removeChild 来添加或移除子视图,但在 Flutter 中 Widget 是不可变的,所以没有 addChild 或 removeChild 方法。相反,你可以向父布局传入一个函数,该函数返回一个子 Widget 给父 Widget。并在该函数中通过一个 bool 值来控制子 Widget 的创建。
下面的例子展示了如果通过点按一个按钮来切换不同的子 Widget:
import 'package:flutter/material.dart';
void main() {
runApp(new SampleApp());
}
class SampleApp extends StatelessWidget {
// This widget is the root of your application.
@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('Toggle One');
} else {
return new MaterialButton(onPressed: () {}, child: new Text('Toggle Two'));
}
}
@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),
),
);
}
}
在 Android 中可以使用 View.animate() 来让 View 产生动画,在 Flutter 中如何让 Widget 产生动画?
在 Flutter 中可以使用animation
库让 Widget 产生动画效果。
在 Andorid 中,可以通过 XML 来创建动画,同样也可以在 View 上调用 animate() 方法产生动画。而在 Flutter 中则需要将 Widget 作为 AnimationWidget 的子节点产生动画。
与 Android 中类似,在 Flutter 中有 AnimationController 和 Interpolater,它们都扩展了 Animation 类。要实现动画可以将 AnimationController 和 Animation 传递给 AnimationWidget,并通过 AnimationController 来启动动画。
下面这个例子展示了如何编写一个带淡入淡出效果的动画:
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();
},
),
);
}
}
查阅 http://doc.flutter-dev.cn/widgets/animation/ 和 http://doc.flutter-dev.cn/widgets/animation/ 了解更多关于动画的细节。
如何使用 Canvas 进行绘制?
在 Android 中可以使用 Canvas 进行自定义的绘制。
在 Flutter 中,CustomPaint
和 CustomPainter
两个类可以帮助你在 Canvas 上进行绘制。
查看下面链接,可以了解到如何使用上面提到的两个类实现一个签名功能:
https://stackoverflow.com/questions/46241071/create-signature-area-for-mobile-app-in-dart-flutter
示例代码:
import 'package:flutter/material.dart';
void main() => runApp(new MaterialApp(home: new DemoApp()));
class DemoApp extends StatelessWidget {
Widget build(BuildContext context) => new Scaffold(body: new Signature());
}
class Signature extends StatefulWidget {
SignatureState createState() => new SignatureState();
}
class SignatureState extends State<Signature> {
List<Offset> _points = <Offset>[];
Widget build(BuildContext context) {
return new GestureDetector(
onPanUpdate: (DragUpdateDetails details) {
setState(() {
RenderBox referenceBox = context.findRenderObject();
Offset localPosition =
referenceBox.globalToLocal(details.globalPosition);
_points = new List.from(_points)..add(localPosition);
});
},
onPanEnd: (DragEndDetails details) => _points.add(null),
child: new CustomPaint(painter: new SignaturePainter(_points)),
);
}
}
class SignaturePainter extends CustomPainter {
SignaturePainter(this.points);
final List<Offset> points;
void paint(Canvas canvas, Size size) {
var 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;
}
如何构建自定义 Widget ?
在 Android 中通常通过继承 View 或其子类来构建自定义的 View。
在 Flutter 中构建自定义的 Widget 通常采用的是组合其他 Widget
的方式而非传统的继承。
下面看一下如何构建一个自定义的按钮,它将构造方法传入的文字作为自己按钮的文字进行显示。这里可以看到我们是通过将其两者进行组合来实现,而非继承 RaiseButton 来实现。
class CustomButton extends StatelessWidget {
final String label;
CustomButton(this.label);
@override
Widget build(BuildContext context) {
return new RaisedButton(onPressed: () {}, child: new Text(label));
}
}
//接下来就可以像使用其他 Widget 一样来使用 CustomButton 了:
@override
Widget build(BuildContext context) {
return new Center(
child: new CustomButton("Hello"),
);
}
}