401--Flutter for iOS 1--Views
[TOC]
Views
1. UIView 相当于 Flutter 中的什么？
在 iOS 中，构建 UI 的过程中将大量使用 view 对象。这些对象都是 UIView 的实例。它们可以用作容器来承载其他的 UIView，最终构成你的界面布局。
在 Flutter 中，你可以粗略地认为 Widget 相当于 UIView 。Widget 和 iOS 中的控件并不完全等价，但当你试图去理解 Flutter 是如何工作的时候，你可以认为它们是“声明和构建 UI 的方法”。
然而，Widget 和 UIView 还是有些区别的。首先，widgets 拥有不同的生存时间：它们一直存在且保持不变，直到当它们需要被改变。当 widgets 和它们的状态被改变时，Flutter 会构建一颗新的 widgets 树。作为对比，iOS 中的 views 在改变时并不会被重新创建。但是与其说 views 是可变的实例，不如说它们被绘制了一次，并且直到使用 setNeedsDisplay() 之后才会被重新绘制。
此外，不像 UIView，由于不可变性，Flutter 的 widgets 非常轻量。这是因为它们本身并不是什么控件，也不会被直接绘制出什么，而只是 UI 的描述。
Flutter 包含了 Material 组件库。这些 widgets 遵循了 Material 设计规范。MD 是一个灵活的设计系统，并且为包括 iOS 在内的所有系统进行了优化。
但是用 Flutter 实现任何的设计语言都非常的灵活和富有表现力。在 iOS 平台，你可以使用 Cupertino widgets 来构建遵循了 Apple’s iOS design language 的界面。
2. 我怎么来更新 Widgets？
在 iOS 上更新 views，只需要直接改变它们就可以了。在 Flutter 中，widgets 是不可变的，而且不能被直接更新。你需要去操纵 widget 的 state。
这也正是有状态的和无状态的 widget 这一概念的来源。一个 StatelessWidget 正如它听起来一样，是一个没有附加状态的 widget。
StatelessWidget 在你构建初始化后不再进行改变的界面时非常有用。
举个例子，你可能会用一个 UIImageView 来展示你的 logo image 。如果这个 logo 在运行时不会改变，那么你就可以在 Flutter 中使用 StatelessWidget 。
如果你希望在发起 HTTP 请求时，依托接收到的数据动态的改变 UI，请使用 StatefulWidget。当 HTTP 请求结束后，通知 Flutter 框架 widget 的 State 更新了，好让系统来更新 UI。
有状态和无状态的 widget 之间一个非常重要的区别是，StatefulWidget 拥有一个 State 对象来存储它的状态数据，并在 widget 树重建时携带着它，因此状态不会丢失。
如果你有疑惑，请记住以下规则：如果一个 widget 在它的 build 方法之外改变（例如，在运行时由于用户的操作而改变），它就是有状态的。如果一个 widget 在一次 build 之后永远不变，那它就是无状态的。但是，即便一个 widget 是有状态的，包含它的父亲 widget 也可以是无状态的，只要父 widget 本身不响应这些变化。
下面的例子展示了如何使用一个 StatelessWidget 。一个常见的 StatelessWidget 是 Text widget。如果你查看 Text 的实现，你会发现它是 StatelessWidget 的子类。
Text(
'I like Flutter!',
style: TextStyle(fontWeight: FontWeight.bold),
);
阅读上面的代码，你可能会注意到 Text widget 并不显示地携带任何状态。它通过传入给它的构造器的数据来渲染，除此之外再无其他。
但是，如果你希望 I like Flutter 在点击 FloatingActionButton 时动态的改变呢？
为了实现这个，用 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),
),
);
}
}
3. 我怎么对 widget 布局？我的 Storyboard 在哪？
在 iOS 中，你可能会用 Storyboard 文件来组织 views，并对它们设置约束，或者，你可能在 view controller 中使用代码来设置约束。在 Flutter 中，你通过编写一个 widget 树来声明你的布局。
下面这个例子展示了如何展示一个带有 padding 的简单 widget：
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Sample App"),
),
body: Center(
child: CupertinoButton(
onPressed: () {
setState(() { _pressedCount += 1; });
},
child: Text('Hello'),
padding: EdgeInsets.only(left: 10.0, right: 10.0),
),
),
);
}
你可以给任何的 widget 添加 padding，这很像 iOS 中约束的功能。
你可以在 widget catalog 中查看 Flutter 提供的布局。
4. 我怎么在我的约束中添加或移除组件？
在 iOS 中，你在父 view 中调用 addSubview() 或在子 view 中调用 removeFromSuperview() 来动态地添加或移除子 views。在 Flutter 中，由于 widget 不可变，所以没有和 addSubview() 直接等价的东西。作为替代，你可以向 parent 传入一个返回 widget 的函数，并用一个布尔值来控制子 widget 的创建。
下面这个例子展示了在点击 FloatingActionButton 时如何动态地切换两个 widgets：
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 CupertinoButton(
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),
),
);
}
}
5. 我怎么对 widget 做动画？
在 iOS 中，你通过调用 animate(withDuration:animations:) 方法来给一个 view 创建动画。在 Flutter 中，使用动画库来包裹 widgets，而不是创建一个动画 widget。
在 Flutter 中，使用 AnimationController 。这是一个可以暂停、寻找、停止、反转动画的 Animation<double> 类型。它需要一个 Ticker 当 vsync 发生时来发送信号，并且在每帧运行时创建一个介于 0 和 1 之间的线性插值（interpolation）。你可以创建一个或多个的 Animation 并附加给一个 controller。
例如，你可能会用 CurvedAnimation 来实现一个 interpolated 曲线。在这个场景中，controller 是动画过程的“主人”，而 CurvedAnimation 计算曲线，并替代 controller 默认的线性模式。
当构建 widget 树时，你会把 Animation 指定给一个 widget 的动画属性，比如 FadeTransition 的 opacity，并告诉控制器开始动画。
下面这个例子展示了在点击 FloatingActionButton 之后，如何使用 FadeTransition 来让 widget 淡出到 logo 图标：
class SampleApp 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() {
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();
},
),
);
}
@override
dispose() {
controller.dispose();
super.dispose();
}
}
更多信息，请参阅 Animation & Motion widgets， Animations tutorial 以及 Animations overview。
6. 我该怎么绘图？
在 iOS 上，你通过 CoreGraphics 来在屏幕上绘制线条和形状。Flutter 有一套基于 Canvas 类的不同的 API，还有 CustomPaint 和 CustomPainter 这两个类来帮助你绘图。后者实现你在 canvas 上的绘图算法。
想要学习如何实现一个笔迹画笔，请参考 Collin 在 StackOverflow 上的回答。
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;
}
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),
);
}
}
7. Widget 的透明度在哪里？
在 iOS 中，什么东西都会有一个 .opacity 或是 .alpha 的属性。在 Flutter 中，你需要给 widget 包裹一个 Opacity widget 来做到这一点。
8. 我怎么创建自定义的 widgets？
在 iOS 中，你编写 UIView 的子类，或使用已经存在的 view 来重载并实现方法，以达到特定的功能。在 Flutter 中，你会组合（composing）多个小的 widgets 来构建一个自定义的 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"),
);
}
