https://www.jianshu.com/p/a54e11bff972
摘自网络，备自己学习记录。
1. Flutter中用 Widget 表示iOS中的UIView、Android中的View。
Flutter中使用 Widget 表示双端开发中的view概念。
就像双端中的view一样，也可包含其他的Widget部件。
区别：
● Flutter中当 widgets 和它们的状态被改变时，Flutter 会构建一颗新的 widgets 树。不像 UIView，由于不可变性Flutter 的 widgets 非常轻量。
● iOS中UIView在改变时并不会被重新创建，直到使用 setNeedsDisplay() 之后才会被重新绘制。
● Android中View在改变时并不会被重新创建，直到调用invalidate时才会重绘。
2. Flutter中通过StatefulWidget更新widget状态
iOS和android中可以直接修改UIView或View的属性值，达到改变状态的目的.
Flutter中通过使用StatefulWidget来修改widget状态。
StatefulWidget → 有状态的
StatelessWidget → 无状态的StatefulWidget 有个 State 对象来存储它的状态数据，通过改变State对象的值来修改StatefulWidget的UI表现。
StatelessWidget 则没有。例如在运行时不会改变的logo图片，就可在 StatelessWidget 来表示。
Text(
'I like this 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<SampleAppPage> {
// Default placeholder text
String textToShow = "I Like Flutter~~";
void _updateText() {
setState(() {
// update the text
textToShow = "Flutter is A supper !";
});
}
@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. 布局界面
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),
),
),
);
}
4. 动态添加、删除View
Android : addChild、removeChild。
iOS : addSubview() 或在子 view 中调用removeFromSuperview() 。
Flutter : widget是不可变的所以没有addChild方法。可通过改变一个布尔值然后重绘来决定是否展示一个控件。
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<SampleAppPage> {
// Default value for toggle
bool toggle = true;
void _toggle() {
setState(() {
toggle = !toggle;
});
}
_getToggleChild() {
if (toggle) {
return new Text('Text AAA');
} else {
return new MaterialButton(onPressed: () {}, child: new Text('Text BBB'));
}
}
@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 the Text',
child: new Icon(Icons.update),
),
);
}
}
5. Flutter使用动画
iOS 中通过调用 animate(withDuration:animations:) 方法给一个 view 创建动画;
Android中通过XML创建动画或在视图上调用.animate();
Flutter中用动画库来包裹 widgets ,
在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<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();
},
),
);
}
}
6. Flutter绘图
iOS 用CoreGraphics绘制线条和形状。
Android用Canvas绘制自定义形状。
Flutter用CustomPaint 和 CustomPainter 两个类绘图。
网友评论