前言
在实际开发中，我们会经常遇到一些复杂的 UI 需求，往往无法通过使用 Flutter 的基本 Widget，通过设置其属性参数来满足。这个时候，我们就需要针对特定的场景自定义 Widget 了。
在 Flutter 中，自定义 Widget 与其他平台类似：可以使用基本 Widget 组装成一个高级别的 Widget，也可以自己在画板上根据特殊需求来画界面。
组装
使用组合的方式自定义 Widget，即通过摆放项目所需要的基础 Widget，并在控件内部设置这些基础 Widget 的样式，从而组合成一个更高级的控件。这样增强了控件的复用性。
示例：
在应用市场中，我们经常需要将应用的 Icon、应用名、类型、简介、安装/打开按钮。这里面的 UI 元素还是相对比较多的，现在我们希望将应用市场 UI 封装成一个单独的控件，节省使用成本，增强复用性。
华为应用市场
在分析这个 UI 的整体结构之前，我们先定义一个数据结构 ItemModel 来储存信息。
class ItemModel {
String icon;
String rank;
String name;
String type;
String description;
ItemModel({this.icon, this.rank, this.name, this.description});
}
按照子 Widget 的摆放方向，布局方式只有水平和垂直两种，因此按照这两个维度对 UI 机构进行拆解。
把 UI 拆解，如图所示：
拆解图
- 左边的应用图标；
- 第二部分文本排名；
- 第三部分三个文本在垂直方向上的组合；
- 右边的 FlatButton 按钮。
可以将其包装为一个水平布局的 Row 控件，第三部分包装为一个 Column 控件。
通过与拆解前的 UI 对比，还有 3 个问题待解决：即控件间的边距如何设置、第三部分的伸缩（截断）规则又是怎样、图片圆角怎么实现。
Image、FlatButton，以及 Column 这三个控件，与父容器 Row 之间存在一定的间距，因此需要在左边的 Image 与 右边的 FlayButton 上包装一层 Padding，用以留白填充。
另一方面，考虑到需要适配不同尺寸的屏幕，中间部分的三个文本应该是变长可伸缩的，但也不能无限制地伸缩，太长了还是需要截断的，否则就会挤压到右边的按钮的固定空间了。
因此，需要在 Column 的外层用 Expanded 控件再包装一层，让 Image 与 FlatButton 之间的控件全部留给 Column。不过，通常情况下这三个文本并不能完全填满中间的空间，因此我们还需要设置对齐格式，按照垂直方向上居中，水平方向上居左的方式排列。
最后一项，Icon 是圆角的，但普通的 Image 并不支持圆角。这里我们可以使用 ClipRRect 控件来解决这个问题，ClipRRect 可以将其子 Widget 按照圆角矩形的规则进行裁剪，所以用 ClipRRect 将 Image 包装起来，就可以实现图片圆角功能了。
代码如下所示：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter 组合控件'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
// Row 控件，用来水平摆放子 Widget
body: ListView(
children: <Widget>[
// 组合控件，并传入构造参数
GroupViewWidget(
itemModel: ItemModel(
icon: 'assets/icon.png',
rank: '1',
name: '简书',
description: '创造你的创造',
type: '文学创造'),
onPressed: () {},
)
],
));
}
}
// 组合控件
class GroupViewWidget extends StatelessWidget {
final ItemModel itemModel;
final VoidCallback onPressed;
GroupViewWidget({Key key, this.itemModel, this.onPressed});
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
// Padding 控件，用来设置 Image 控件内边距
Padding(
// 上下左右边距均为 10
padding: EdgeInsets.all(10),
// 圆角矩形裁剪控件
child: ClipRRect(
// 圆角半径为 8
borderRadius: BorderRadius.circular(8.0),
// 图片控件
child: Image.asset(itemModel.icon, width: 80, height: 80),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
child: Text(itemModel.rank),
),
// Expanded 控件，用来拉伸中间区域
Expanded(
// Column 控件，用来垂直摆放子 Widget
child: Column(
// 垂直方向居中对齐
mainAxisAlignment: MainAxisAlignment.center,
// 水平方向居左对齐
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
// 名字
Text(
itemModel.name,
maxLines: 1,
),
// 类型
Text(
itemModel.type,
maxLines: 1,
),
// 简介
Text(itemModel.description),
],
),
),
Padding(
// Padding 控件，用来设置 FlatButton 内边距
// 右边距为 10，其余均为 0
padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
child: FlatButton(
// 按钮背景颜色
color: Color(0xFFF1F0F7),
// 按钮点击后颜色
highlightColor: Colors.blue[700],
// 按钮主题
colorBrightness: Brightness.dark,
child: Text(
"安装",
style: TextStyle(
// 字体颜色
color: Color(0xFF007AFE),
// 字体加粗
fontWeight: FontWeight.bold),
),
shape: RoundedRectangleBorder(
// 按钮加圆角
borderRadius: BorderRadius.circular(20.0)),
onPressed: onPressed,
),
),
],
);
}
}
// 控件数据实体类
class ItemModel {
String icon;
String rank;
String name;
String type;
String description;
ItemModel({this.icon, this.rank, this.name, this.type, this.description});
}
示例图如下所示：
示例图
按照从上到下，从左到右去拆解 UI 的布局结构，把复杂的 UI 分解成各个小 UI 元素，在以组装的方式去定义 UI 中非常有用。
自绘
Flutter 提供了非常丰富的控件和布局方式，使得我们可以通过组合去构建一个新的视图。但对于一些不规则的视图，用 SDK 提供的现有 Widget 组合可能无法实现，比如饼图，k 线图、贝塞尔曲线等，这个时候我们就需要自己用画笔去绘制了。
在原生 iOS 和 Android 开发中，我们可以继承 UIView/View，在 drawRect/onDraw 方法里进行绘制操作。其实，在 Flutter 中也有类似的方案，那就是 CustomPaint。
CustomPaint 是用以承接自绘控件的容器，并不负责真正的绘制。既然是绘制，那就需要用到画布与画笔。
在 Flutter 中，画布是 Canvas，画笔则是 Paint，而画成什么样子，则由定义了绘制逻辑的 CustomPainter 来控制。将 CustomPainter 设置给容器 CustomPaint 的 painter 属性，我们就完成了一个自绘控件的封装。
对于画笔 Paint，可以配置它的各种属性，比如颜色、样式、粗细等；而画布 Canvas，则提供了各种常见的绘制方法，比如画线 drawLine、画矩形 drawRect、画点 drawPoint、画路径 drawPath、画圆 drawCircle、画圆弧 drawArc 等。
这样，我们就可以在 CustomPainter 的 paint 方法里，通过 Canvas 与 Paint 的配合，实现定制化的绘制逻辑。
示例：
首先，创建 WheelPainter 类继承 CustomPainter，在定义了绘制逻辑的 paint 方法中，通过 Canvas 的 drawArc 方法，用 6 种不同颜色的画笔依次画了 6 个 1/6 圆弧，拼成了一张饼图。最后，我们使用 CustomPaint 容器，将 painter 进行封装，就完成了饼图控件 WheelWidget 的定义。
示例代码如下所示：
import 'package:flutter/material.dart';
import 'dart:math';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter 组合控件'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
// Row 控件，用来水平摆放子 Widget
body: ListView(
children: <Widget>[
// 组合控件，并传入构造参数
GroupViewWidget(
itemModel: ItemModel(
icon: 'assets/icon.png',
rank: '1',
name: '简书',
description: '创造你的创造',
type: '文学创造'),
onPressed: () {},
),
WheelWidget()
],
));
}
}
// 组合控件
class GroupViewWidget extends StatelessWidget {
final ItemModel itemModel;
final VoidCallback onPressed;
GroupViewWidget({Key key, this.itemModel, this.onPressed});
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
// Padding 控件，用来设置 Image 控件内边距
Padding(
// 上下左右边距均为 10
padding: EdgeInsets.all(10),
// 圆角矩形裁剪控件
child: ClipRRect(
// 圆角半径为 8
borderRadius: BorderRadius.circular(8.0),
// 图片控件
child: Image.asset(itemModel.icon, width: 80, height: 80),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
child: Text(itemModel.rank),
),
// Expanded 控件，用来拉伸中间区域
Expanded(
// Column 控件，用来垂直摆放子 Widget
child: Column(
// 垂直方向居中对齐
mainAxisAlignment: MainAxisAlignment.center,
// 水平方向居左对齐
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
// 名字
Text(
itemModel.name,
maxLines: 1,
),
// 类型
Text(
itemModel.type,
maxLines: 1,
),
// 简介
Text(itemModel.description),
],
),
),
Padding(
// Padding 控件，用来设置 FlatButton 内边距
// 右边距为 10，其余均为 0
padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
child: FlatButton(
// 按钮背景颜色
color: Color(0xFFF1F0F7),
// 按钮点击后颜色
highlightColor: Colors.blue[700],
// 按钮主题
colorBrightness: Brightness.dark,
child: Text(
"安装",
style: TextStyle(
// 字体颜色
color: Color(0xFF007AFE),
// 字体加粗
fontWeight: FontWeight.bold),
),
shape: RoundedRectangleBorder(
// 按钮加圆角
borderRadius: BorderRadius.circular(20.0)),
onPressed: onPressed,
),
),
],
);
}
}
// 控件数据实体类
class ItemModel {
String icon;
String rank;
String name;
String type;
String description;
ItemModel({this.icon, this.rank, this.name, this.type, this.description});
}
// 将饼图封装成一个新的控件
class WheelWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CustomPaint(
// 设置控件宽高
size: Size(200, 200),
painter: WheelPaint(),
);
}
}
// 自绘控件
class WheelPaint extends CustomPainter {
// 设置画笔颜色，返回不同颜色画笔
Paint getColorPaint(Color color) {
// 生成画笔
Paint paint = Paint();
// 设置画笔颜色
paint.color = color;
return paint;
}
// 绘制逻辑
@override
void paint(Canvas canvas, Size size) {
// 饼图的尺寸
double wheelSize = min(size.width, size.height) / 2;
// 分成 6 份
double nbElem = 6;
// 1/6 圆
double radius = (2 * pi) / nbElem;
// 包裹饼图这个圆形的矩形框
Rect boundingRect = Rect.fromCircle(center: Offset(wheelSize, wheelSize), radius: wheelSize);
// 每次画 1/6 个圆弧
canvas.drawArc(boundingRect, 0, radius, true, getColorPaint(Colors.orange));
canvas.drawArc(boundingRect, radius, radius, true, getColorPaint(Colors.black38));
canvas.drawArc(boundingRect, radius * 2, radius, true, getColorPaint(Colors.green));
canvas.drawArc(boundingRect, radius * 3, radius, true, getColorPaint(Colors.red));
canvas.drawArc(boundingRect, radius * 4, radius, true, getColorPaint(Colors.blue));
canvas.drawArc(boundingRect, radius * 5, radius, true, getColorPaint(Colors.pink));
}
// 判断是否需要重绘，这里简单的做下比较即可
@override
bool shouldRepaint(CustomPainter oldDelegate) => oldDelegate != this;
}
示例图如下所示：
示例图
使用 CustomPainter 进行自绘控件并不算复杂。
总结
在实现视觉需求上，自绘需要自己亲自处理绘制逻辑，而组合则是通过子 Widget 的拼接来实现绘制意图。因此从渲染逻辑处理上，自绘方案可以进行深度的渲染定制，从而实现少数通过组合很难实现的需求（比如饼图、k 线图）。不过，当视觉效果需要调整时，采用自绘的方案可能需要大量修改绘制代码，而组合方案则相对简单：只要布局拆分设计合理，可以通过更换子 Widget 类型来轻松搞定。
网友评论