Flutter系列文章-Flutter UI进阶

蒲小可

在本篇文章中，我们将深入学习 Flutter UI 的进阶技巧，涵盖了布局原理、动画实现、自定义绘图和效果、以及 Material 和 Cupertino 组件库的使用。通过实例演示，你将更加了解如何创建复杂、令人印象深刻的用户界面。
第一部分：深入理解布局原理

1. 灵活运用 Row 和 Column

Row 和 Column 是常用的布局组件，但灵活地使用它们可以带来不同的布局效果。例如，使用 mainAxisAlignment 和 crossAxisAlignment 可以控制子组件在主轴和交叉轴上的对齐方式。

1. Row(
2.   mainAxisAlignment: MainAxisAlignment.spaceBetween,
3.   children: [
4.     Container(width: 50, height: 50, color: Colors.red),
5.     Container(width: 50, height: 50, color: Colors.green),
6.     Container(width: 50, height: 50, color: Colors.blue),
7.   ],
8. )

复制代码

2. 弹性布局 Flex 和 Expanded

Flex 和 Expanded 可以用于实现弹性布局，让组件占据可用空间的比例。例如，下面的代码将一个蓝色容器占据两倍宽度的空间。

1. Row(
2.   children: [
3.     Container(width: 50, height: 50, color: Colors.red),
4.     Expanded(
5.       flex: 2,
6.       child: Container(height: 50, color: Colors.blue),
7.     ),
8.   ],
9. )

复制代码

第二部分：动画和动效实现

1. 使用 AnimatedContainer

AnimatedContainer 可以实现在属性变化时自动产生过渡动画效果。例如，以下代码在点击时改变容器的宽度和颜色。

1. class AnimatedContainerExample extends StatefulWidget {
2.   @override
3.   _AnimatedContainerExampleState createState() => _AnimatedContainerExampleState();
4. }
6. class _AnimatedContainerExampleState extends State<AnimatedContainerExample> {
7.   double _width = 100;
8.   Color _color = Colors.blue;
10.   void _animateContainer() {
11.     setState(() {
12.       _width = _width == 100 ? 200 : 100;
13.       _color = _color == Colors.blue ? Colors.red : Colors.blue;
14.     });
15.   }
17.   @override
18.   Widget build(BuildContext context) {
19.     return GestureDetector(
20.       onTap: _animateContainer,
21.       child: AnimatedContainer(
22.         width: _width,
23.         height: 100,
24.         color: _color,
25.         duration: Duration(seconds: 1),
26.         curve: Curves.easeInOut,
27.       ),
28.     );
29.   }
30. }

复制代码

2. 使用 Hero 动画

Hero 动画可以在页面切换时产生平滑的过渡效果。在不同页面中使用相同的 tag，可以让两个页面之间的共享元素过渡更加自然。

1. class PageA extends StatelessWidget {
2.   @override
3.   Widget build(BuildContext context) {
4.     return GestureDetector(
5.       onTap: () {
6.         Navigator.of(context).push(MaterialPageRoute(
7.           builder: (context) => PageB(),
8.         ));
9.       },
10.       child: Hero(
11.         tag: 'avatar',
12.         child: CircleAvatar(
13.           radius: 50,
14.           backgroundImage: AssetImage('assets/avatar.jpg'),
15.         ),
16.       ),
17.     );
18.   }
19. }
21. class PageB extends StatelessWidget {
22.   @override
23.   Widget build(BuildContext context) {
24.     return Scaffold(
25.       body: Center(
26.         child: Hero(
27.           tag: 'avatar',
28.           child: CircleAvatar(
29.             radius: 150,
30.             backgroundImage: AssetImage('assets/avatar.jpg'),
31.           ),
32.         ),
33.       ),
34.     );
35.   }
36. }

复制代码

第三部分：自定义绘图和效果

1. 使用 CustomPaint 绘制图形

CustomPaint 允许你自定义绘制各种图形和效果。以下是一个简单的例子，绘制一个带边框的矩形。

1. class CustomPaintExample extends StatelessWidget {
2.   @override
3.   Widget build(BuildContext context) {
4.     return CustomPaint(
5.       painter: RectanglePainter(),
6.       child: Container(),
7.     );
8.   }
9. }
11. class RectanglePainter extends CustomPainter {
12.   @override
13.   void paint(Canvas canvas, Size size) {
14.     final paint = Paint()
15.       ..color = Colors.blue
16.       ..style = PaintingStyle.stroke
17.       ..strokeWidth = 2;
19.     canvas.drawRect(Rect.fromLTWH(50, 50, 200, 100), paint);
20.   }
22.   @override
23.   bool shouldRepaint(covariant CustomPainter oldDelegate) {
24.     return false;
25.   }
26. }

复制代码

第四部分：Material 和 Cupertino 组件库

1. 使用 Material 组件

Material 组件库提供了一系列符合 Material Design 规范的 UI 组件。例如，AppBar、Button、Card 等。以下是一个使用 Card 的例子。

1. Card(
2.   elevation: 4,
3.   child: ListTile(
4.     leading: Icon(Icons.account_circle),
5.     title: Text('John Doe'),
6.     subtitle: Text('Software Engineer'),
7.     trailing: Icon(Icons.more_vert),
8.   ),
9. )

复制代码

2. 使用 Cupertino 组件

Cupertino 组件库提供了 iOS 风格的 UI 组件，适用于 Flutter 应用在 iOS 平台上的开发。例如，CupertinoNavigationBar、CupertinoButton 等。
dart
Copy code
CupertinoNavigationBar(
middle: Text('Cupertino Example'),
trailing: CupertinoButton(
child: Text('Done'),
onPressed: () {},
),
)
第五部分：综合实例

以下是一个更加综合的例子，涵盖了之前提到的布局、动画、自定义绘图和 Material/Cupertino 组件库的知识点。

1. import 'package:flutter/material.dart';
2. import 'package:flutter/cupertino.dart';
4. void main() {
5.   runApp(MyApp());
6. }
8. class MyApp extends StatelessWidget {
9.   @override
10.   Widget build(BuildContext context) {
11.     return MaterialApp(
12.       home: ExampleScreen(),
13.     );
14.   }
15. }
17. class ExampleScreen extends StatelessWidget {
18.   @override
19.   Widget build(BuildContext context) {
20.     return Scaffold(
21.       appBar: AppBar(
22.         title: Text('Advanced UI Example'),
23.       ),
24.       body: Padding(
25.         padding: const EdgeInsets.all(16.0),
26.         child: Column(
27.           mainAxisAlignment: MainAxisAlignment.center,
28.           children: [
29.             AnimatedRotateExample(),
30.             SizedBox(height: 20),
31.             CustomPaintExample(),
32.             SizedBox(height: 20),
33.             PlatformWidgetsExample(),
34.           ],
35.         ),
36.       ),
37.     );
38.   }
39. }
41. class AnimatedRotateExample extends StatefulWidget {
42.   @override
43.   _AnimatedRotateExampleState createState() => _AnimatedRotateExampleState();
44. }
46. class _AnimatedRotateExampleState extends State<AnimatedRotateExample> {
47.   double _rotation = 0;
49.   void _startRotation() {
50.     Future.delayed(Duration(seconds: 1), () {
51.       setState(() {
52.         _rotation = 45;
53.       });
54.     });
55.   }
57.   @override
58.   Widget build(BuildContext context) {
59.     return Column(
60.       children: [
61.         GestureDetector(
62.           onTap: () {
63.             _startRotation();
64.           },
65.           child: AnimatedBuilder(
66.             animation: Tween<double>(begin: 0, end: _rotation).animate(
67.               CurvedAnimation(
68.                 parent: ModalRoute.of(context)!.animation!,
69.                 curve: Curves.easeInOut,
70.               ),
71.             ),
72.             builder: (context, child) {
73.               return Transform.rotate(
74.                 angle: _rotation * 3.1416 / 180,
75.                 child: child,
76.               );
77.             },
78.             child: Container(
79.               width: 100,
80.               height: 100,
81.               color: Colors.blue,
82.               child: Icon(
83.                 Icons.star,
84.                 color: Colors.white,
85.               ),
86.             ),
87.           ),
88.         ),
89.         Text('Tap to rotate'),
90.       ],
91.     );
92.   }
93. }
95. class CustomPaintExample extends StatelessWidget {
96.   @override
97.   Widget build(BuildContext context) {
98.     return CustomPaint(
99.       painter: CirclePainter(),
100.       child: Container(
101.         width: 200,
102.         height: 200,
103.         alignment: Alignment.center,
104.         child: Text(
105.           'Custom Paint',
106.           style: TextStyle(color: Colors.white, fontSize: 18),
107.         ),
108.       ),
109.     );
110.   }
111. }
113. class CirclePainter extends CustomPainter {
114.   @override
115.   void paint(Canvas canvas, Size size) {
116.     final center = Offset(size.width / 2, size.height / 2);
117.     final radius = size.width / 2;
118.     final paint = Paint()
119.       ..color = Colors.orange
120.       ..style = PaintingStyle.fill;
122.     canvas.drawCircle(center, radius, paint);
123.   }
125.   @override
126.   bool shouldRepaint(CustomPainter oldDelegate) {
127.     return false;
128.   }
129. }
131. class PlatformWidgetsExample extends StatelessWidget {
132.   @override
133.   Widget build(BuildContext context) {
134.     return Column(
135.       children: [
136.         Material(
137.           elevation: 4,
138.           child: ListTile(
139.             leading: Icon(Icons.account_circle),
140.             title: Text('John Doe'),
141.             subtitle: Text('Software Engineer'),
142.             trailing: Icon(Icons.more_vert),
143.           ),
144.         ),
145.         SizedBox(height: 20),
146.         CupertinoButton.filled(
147.           child: Text('Explore'),
148.           onPressed: () {},
149.         ),
150.       ],
151.     );
152.   }
153. }

复制代码

这个示例演示了一个综合性的界面，包括点击旋转动画、自定义绘图和 Material/Cupertino 组件。你可以在此基础上进一步扩展和修改，以满足更复杂的 UI 设计需求。
总结

在本篇文章中，我们深入学习了 Flutter UI 的进阶技巧。我们了解了布局原理、动画实现、自定义绘图和效果，以及 Material 和 Cupertino 组件库的使用。通过实例演示，你将能够更加自信地构建复杂、令人印象深刻的用户界面。
希望这篇文章能够帮助你在 Flutter UI 进阶方面取得更大的进展。如果你有任何问题或需要进一步的指导，请随时向我询问。祝你在 Flutter 开发的道路上取得成功！

来源:https://www.cnblogs.com/depeng8899/p/17623108.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！