flutter自定义组件最佳实践
原创
接触flutter一段时间，用flutter做过一些demo项目，也看了一些flutter的源码，对flutter的组件体系有了一些了解，这里总结一下flutter自定义组件的最佳实践。
在flutter上开发自定义组件，实际上有两种方式，一种是继承StatelessWidget或StatefulWidget，另一种是使用RenderObject。继承StatelessWidget或StatefulWidget是最常用的方式，因为它们提供了一些现成的方法和属性，可以方便地实现组件的生命周期和状态管理。而使用RenderObject则需要自己实现一些方法和属性，比较复杂，一般用于实现一些复杂的自定义组件。
我们来分别看看这两种方式的实现。
1. 继承StatelessWidget或StatefulWidget
继承StatelessWidget或StatefulWidget是最常用的方式，因为它们提供了一些现成的方法和属性，可以方便地实现组件的生命周期和状态管理。下面是一个简单的例子，实现一个Counter组件，这个组件可以显示一个计数器，用户可以点击按钮来增加计数器的值。
class Counter extends StatefulWidget {
@override
_CounterState createState() => _CounterState();
}
class _CounterState extends State<Counter> {
int _count = 0;
void _increment() {
setState(() {
_count++;
});
}
@override
Widget build(BuildContext context) {
return Column(
children: [
Text('Count: $_count'),
ElevatedButton(
onPressed: _increment,
child: Text('Increment'),
),
],
);
}
}在这个例子中，我们定义了一个Counter组件，它继承自StatefulWidget，并实现了一个_CounterState类，这个类继承自State，用来管理组件的状态。在_CounterState类中，我们定义了一个_count变量来保存计数器的值，以及一个_increment方法来增加计数器的值。在build方法中，我们使用Column组件来显示计数器的值和一个按钮，用户可以点击按钮来增加计数器的值。
2. 使用RenderObject
使用RenderObject是一种更底层的方式，它可以让我们更加灵活地控制组件的布局和绘制。下面是一个简单的例子，实现一个钟表组件，这个组件可以显示当前时间。
import 'dart:async';
import 'dart:math' as math;
import 'package:flutter/material.dart';
class Clock extends SingleChildRenderObjectWidget {
Clock({Widget child}) : super(child: child);
@override
RenderObject createRenderObject(BuildContext context) {
return RenderClock();
}
}
class RenderClock extends RenderBox {
DateTime _dateTime = DateTime.now();
Timer _timer;
RenderClock() {
_timer = Timer.periodic(Duration(seconds: 1), (Timer t) {
_dateTime = DateTime.now();
this.markNeedsPaint();
});
}
@override
void performLayout() {
size = Size(200, 200);
}
@override
void paint(PaintingContext context, Offset offset) {
final Paint paint = Paint()
..color = Colors.black
..style = PaintingStyle.stroke
..strokeWidth = 2.0;
final center = size.center(offset);
final radius = size.shortestSide / 2;
context.canvas.drawCircle(center, radius, paint);
// Draw the hour hand.
final hourHandLength = radius * 0.5;
final hourHandRadians = ((_dateTime.hour % 12) + _dateTime.minute / 60) * 2 * math.pi / 12 - math.pi / 2;
context.canvas.drawLine(
center,
Offset(center.dx + hourHandLength * math.cos(hourHandRadians),
center.dy + hourHandLength * math.sin(hourHandRadians)),
paint..strokeWidth = 6.0,
);
// Draw the minute hand.
final minuteHandLength = radius * 0.8;
final minuteHandRadians = (_dateTime.minute + _dateTime.second / 60) * 2 * math.pi / 60 - math.pi / 2;
context.canvas.drawLine(
center,
Offset(center.dx + minuteHandLength * math.cos(minuteHandRadians),
center.dy + minuteHandLength * math.sin(minuteHandRadians)),
paint..strokeWidth = 4.0,
);
// Draw the second hand.
final secondHandLength = radius * 0.9;
final secondHandRadians = _dateTime.second * 2 * math.pi / 60 - math.pi / 2;
context.canvas.drawLine(
center,
Offset(center.dx + secondHandLength * math.cos(secondHandRadians),
center.dy + secondHandLength * math.sin(secondHandRadians)),
paint..color = Colors.red..strokeWidth = 2.0,
);
}
@override
void detach() {
_timer.cancel();
super.detach();
}
}效果如下图所示：
图 0
上面给出了两种方式实现自定义组件的例子，第一种方式是继承StatelessWidget或StatefulWidget，第二种方式是使用RenderObject。在实际开发中，我们可能需要遵循一些最佳实践，来提高组件的性能和可维护性。这里主要讲一下组件的封装、布局和文档吧。
1. 组件的封装
在flutter中，组件的封装是常有的是，虽然说大部分时候flutter的组件库已经提供了我们需要的组件，但是有时候我们还是需要自定义一些组件来满足我们的需求。在封装组件时，我们应该遵循以下几个原则：
- • 单一职责原则：一个组件应该只负责一项功能，不要将多个功能耦合在一个组件中。
- • 高内聚低耦合：组件内部的各个部分之间应该高度内聚，不同组件之间应该低耦合。
- • 易用性：组件的使用应该尽可能简单，不要让用户花费过多的时间和精力来学习如何使用组件。
- • 可定制性：组件应该具有一定的可定制性，可以根据用户的需求进行定制。
- • 易扩展性：组件应该具有一定的扩展性，可以方便地扩展新的功能。
下面，我们来一一个简单的例子，比如，我们要实现一个日历组件，这个日历组件可以显示当前月份的日历，并且可以选择日期。我们可以将这个日历组件封装成一个Calendar组件，这个组件可以接受一个DateTime类型的参数，用来指定当前月份的日期。这个Calendar组件可以包含一个MonthView组件和一个WeekView组件，MonthView组件用来显示当前月份的日历，WeekView组件用来显示星期几。这样，我们就将日历组件封装成了一个Calendar组件，用户只需要传入一个DateTime类型的参数，就可以使用这个日历组件了。让我来看看，如何遵循上面的原则来封装这个日历组件。
class Calendar extends StatelessWidget {
final DateTime date;
Calendar({this.date});
@override
Widget build(BuildContext context) {
return Column(
children: [
MonthView(date: date),
WeekView(),
],
);
}
}
class MonthView extends StatelessWidget {
final DateTime date;
MonthView({this.date});
@override
Widget build(BuildContext context) {
return Container(
child: Text('Month View'),
);
}
}
class WeekView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Text('Week View'),
);
}
}这个例子我们来看看以上原则的应用：单一职责原则（Calendar、MonthView和WeekView各自负责一项功能）、高内聚低耦合（Calendar组件由MonthView和WeekView组成，但它们之间的耦合度很低）、易用性（使用Calendar组件只需要传入一个DateTime参数）、可定制性（可以通过修改MonthView和WeekView的实现来定制组件的表现）和易扩展性（可以通过添加更多的子组件来扩展Calendar组件的功能）。
2. 组件的布局
一个好的布局可以提高组件的性能和用户体验，有些组件在涉及之初就需要考虑响应式布局，这样可以适应不同的屏幕尺寸和分辨率。在布局组件时，我们应该遵循以下几个原则：
- • 灵活性：组件的布局应该具有一定的灵活性，可以适应不同的屏幕尺寸和分辨率。
- • 性能：组件的布局应该尽可能简单，不要包含过多的嵌套和无用的布局。
- • 响应式：组件的布局应该具有一定的响应式，可以根据屏幕尺寸和分辨率进行自适应。
- • 可访问性：组件的布局应该具有一定的可访问性，可以方便地让用户进行交互。
下面，我们就来看看另外一个另外一个例子，现在大家都喜欢玩大语言模型聊天对话应用，又要支持图片又要支持文字，我们可以封装一个ChatMessage组件，这个组件可以显示用户发送的消息，可以是文字也可以是图片。这个ChatMessage组件可以包含一个TextMessage组件和一个ImageMessage组件，TextMessage组件用来显示文字消息，ImageMessage组件用来显示图片消息。这样，我们就将聊天消息组件封装成了一个ChatMessage组件，用户只需要传入一个Message对象，就可以使用这个聊天消息组件了。让我来看看，如何遵循上面的原则来布局这个聊天消息组件。
class ChatMessage extends StatelessWidget {
final Message message;
ChatMessage({this.message});
@override
Widget build(BuildContext context) {
return Flexible(
child: message.type == MessageType.text
? TextMessage(text: message.text)
: ImageMessage(image: message.image),
);
}
}
class TextMessage extends StatelessWidget {
final String text;
TextMessage({this.text});
@override
Widget build(BuildContext context) {
return Semantics(
child: Text(text),
label: 'Text message',
);
}
}
class ImageMessage extends StatelessWidget {
final String image;
ImageMessage({this.image});
@override
Widget build(BuildContext context) {
return Semantics(
child: Image.network(image),
label: 'Image message',
);
}
}在这个例子中，ChatMessage组件使用了Flexible来自动调整其大小，以适应不同的屏幕尺寸和分辨率（灵活性和响应式）。同时，我们避免了不必要的嵌套和容器使用，以提高性能。另外，我们使用了Semantics组件来提供辅助功能，以提高可访问性。
3. 组件的文档
一个组件研发完成后，我们应该为组件编写文档，以便其他开发者能够快速了解组件的用法和功能。没有文档的组件是没有人敢用的，现在的开发者都是懒得，不想花费过多的时间和精力来学习如何使用组件。在编写组件文档时，我们应该遵循以下几个原则：
- • 简洁明了：文档应该简洁明了，不要包含过多的废话和无用的信息。
- • 示例代码：文档应该包含示例代码，以便开发者能够快速了解组件的用法。
- • 参数说明：文档应该包含参数说明，以便开发者能够了解组件的参数和功能。
- • 返回值说明：文档应该包含返回值说明，以便开发者能够了解组件的返回值和功能。
- • 效果展示：文档应该包含效果展示，以便开发者能够了解组件的效果和功能。
今天就扯这么多吧，希望对大家有所帮助。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。