flutter 中的小部件的使用
查看 Flutter 官方文档，给自己加深印象
flutter 小部件简介
flutter 中的小部件不同于Android中的View ，小部件具有不同生命周期！！！（在Android中，view生命周期是直到结束）它们也是不可变了。因为每次改变，都是创建新的小部件实例。相比之下，Android都是通过setXXX 去改变旧的属性。
它是极其轻巧的。因为它只负责描述，而不是去绘制实际视图
flutter 小部件的使用
通过查看部分文档，发现它的使用与 Vue 有点相似???
可变的小部件和不可变小部件
可变的小部件指的是，可以改变小部件中的文字等信息。不可变指的是不需要改变文字，布尔值等信息的小部件。例如 Activity 的Title 就不需要改变
在 Flutter 中，使用 StatelessWidget 来描述不可变窗口，使用 StatefulWidget 描述可变窗口，例如：
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final wordPair = WordPair.random();
return MaterialApp(
title: 'this is my first flutter app',
home: RandomWords(),
theme: ThemeData(
primaryColor: Colors.white,
),
);
}
}
这个小部件中，
title是不可变的
class RandomWords extends StatefulWidget {
@override
RandomWordsState createState() => new RandomWordsState();
}
class RandomWordsState extends State<RandomWords> {
// add icon and list
final _saved = new Set<WordPair>();
final _suggestions = <WordPair>[];
final _biggerFont = const TextStyle(fontSize: 18.0);
@override
Widget build(BuildContext context) {
final wordPair = WordPair.random();
// return Text(wordPair.asPascalCase);
return Scaffold(
appBar: AppBar(
title: Text('startup name generator'),
),
body: _buildSuggestions(),
);
}
Widget _buildSuggestions() {
return ListView.builder(
padding: const EdgeInsets.all(16.0),
itemBuilder: (context, i) {
if (i.isOdd) return Divider();
final index = i ~/ 2;
if (index >= _suggestions.length) {
_suggestions.addAll(generateWordPairs().take(10));
}
return _buildRow(_suggestions[index]);
},
);
}
Widget _buildRow(WordPair pair) {
final bool alreadySaved = _saved.contains(pair);
return ListTile(
title: Text(
pair.asPascalCase,
style: _biggerFont,
),
trailing: new Icon(
alreadySaved ? Icons.favorite : Icons.favorite_border,
color: alreadySaved ? Colors.red : null,
),
onTap: () {
setState(() {
if (alreadySaved) {
_saved.remove(pair);
} else {
_saved.add(pair);
}
});
},
);
}
}
在这个小部件中，列表选中状态就是可变的，通过
onTap点击事件，调用setState往 list 中 移除或者添加 pair ，这样，就会引起界面的重绘
小部件的添加和删除
在 flutter 中，不能和Android 一样，在代码中使用 removeChild 或者 addChild ，它只能在 State 小部件中，通过setState 方法，然后通过判断，来动态的创建或移除小部件
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),
),
);
}
}
给我的感觉是更像 Vue 了......
flutter 中如何使用窗口动画
在Android中，窗口动画一般自定义 xml 文件，然后在布局文件中引用，或者代码使用 alpha 定义颜色，使用 state 切换。
在 Flutter 中，使用控制器 AnimationController 控制动画的执行，可以交由其他 小部件进行动画的计算。如：CurvedAnimation
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() {
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();
},
),
);
}
}
Flutter 中使用画布
在Android中，需要自定义文字显示，或者其它图像的时候，需要自定义 Canvas ，使用draw 绘制，在Flutter中，提供了最简单的画图示例：
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;
}
返回一个 GestureDetector 小部件，在 onPanUpdate 中记录每次途径的路径，使用 setState 更新界面。
如何自定义View
在Android中，如果需要自定义控件，可以定义子类，然后覆写父类的方法，例如，如果要在
ImageView的图片上覆盖蒙版，可以自定义类，然后覆写setImageBitmap方法，在bitmap上添加蒙版。但是在flutter中，推荐使用各种小部件的方式组合成一个真正需要的小部件
如果需要自定义一个按钮，则可以编写CustomButtom
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: DemoApp()));
class DemoApp extends StatelessWidget {
// Widget build(BuildContext context) => Scaffold(body: Signature());
Widget build(BuildContext context){
return Center(
child:CustomButton("buttom")
);
}
}
class CustomButton extends StatelessWidget {
final String label;
CustomButton(this.label);
@override
Widget build(BuildContext context) {
return RaisedButton(onPressed: () {}, child: Text(label));
}
}
然后使RaisedButtom成为其子类
