前言
在實(shí)際開發(fā)中，我們會(huì)經(jīng)常遇到一些復(fù)雜的 UI 需求，往往無法通過使用 Flutter 的基本 Widget，通過設(shè)置其屬性參數(shù)來滿足。這個(gè)時(shí)候，我們就需要針對(duì)特定的場景自定義 Widget 了。
在 Flutter 中，自定義 Widget 與其他平臺(tái)類似：可以使用基本 Widget 組裝成一個(gè)高級(jí)別的 Widget，也可以自己在畫板上根據(jù)特殊需求來畫界面。
組裝
使用組合的方式自定義 Widget，即通過擺放項(xiàng)目所需要的基礎(chǔ) Widget，并在控件內(nèi)部設(shè)置這些基礎(chǔ) Widget 的樣式，從而組合成一個(gè)更高級(jí)的控件。這樣增強(qiáng)了控件的復(fù)用性。
示例：
在應(yīng)用市場中，我們經(jīng)常需要將應(yīng)用的 Icon、應(yīng)用名、類型、簡介、安裝/打開按鈕。這里面的 UI 元素還是相對(duì)比較多的，現(xiàn)在我們希望將應(yīng)用市場 UI 封裝成一個(gè)單獨(dú)的控件，節(jié)省使用成本，增強(qiáng)復(fù)用性。
在分析這個(gè) UI 的整體結(jié)構(gòu)之前，我們先定義一個(gè)數(shù)據(jù)結(jié)構(gòu) ItemModel 來儲(chǔ)存信息。
class ItemModel {
String icon;
String rank;
String name;
String type;
String description;
ItemModel({this.icon, this.rank, this.name, this.description});
}
按照子 Widget 的擺放方向，布局方式只有水平和垂直兩種，因此按照這兩個(gè)維度對(duì) UI 機(jī)構(gòu)進(jìn)行拆解。
把 UI 拆解，如圖所示：
- 左邊的應(yīng)用圖標(biāo)；
- 第二部分文本排名；
- 第三部分三個(gè)文本在垂直方向上的組合；
- 右邊的 FlatButton 按鈕。
可以將其包裝為一個(gè)水平布局的 Row 控件，第三部分包裝為一個(gè) Column 控件。
通過與拆解前的 UI 對(duì)比，還有 3 個(gè)問題待解決：即控件間的邊距如何設(shè)置、第三部分的伸縮（截?cái)啵┮?guī)則又是怎樣、圖片圓角怎么實(shí)現(xiàn)。
Image、FlatButton，以及 Column 這三個(gè)控件，與父容器 Row 之間存在一定的間距，因此需要在左邊的 Image 與 右邊的 FlayButton 上包裝一層 Padding，用以留白填充。
另一方面，考慮到需要適配不同尺寸的屏幕，中間部分的三個(gè)文本應(yīng)該是變長可伸縮的，但也不能無限制地伸縮，太長了還是需要截?cái)嗟模駝t就會(huì)擠壓到右邊的按鈕的固定空間了。
因此，需要在 Column 的外層用 Expanded 控件再包裝一層，讓 Image 與 FlatButton 之間的控件全部留給 Column。不過，通常情況下這三個(gè)文本并不能完全填滿中間的空間，因此我們還需要設(shè)置對(duì)齊格式，按照垂直方向上居中，水平方向上居左的方式排列。
最后一項(xiàng)，Icon 是圓角的，但普通的 Image 并不支持圓角。這里我們可以使用 ClipRRect 控件來解決這個(gè)問題，ClipRRect 可以將其子 Widget 按照圓角矩形的規(guī)則進(jìn)行裁剪，所以用 ClipRRect 將 Image 包裝起來，就可以實(shí)現(xiàn)圖片圓角功能了。
代碼如下所示：
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>[
// 組合控件，并傳入構(gòu)造參數(shù)
GroupViewWidget(
itemModel: ItemModel(
icon: 'assets/icon.png',
rank: '1',
name: '簡書',
description: '創(chuàng)造你的創(chuàng)造',
type: '文學(xué)創(chuàng)造'),
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 控件，用來設(shè)置 Image 控件內(nèi)邊距
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 控件，用來拉伸中間區(qū)域
Expanded(
// Column 控件，用來垂直擺放子 Widget
child: Column(
// 垂直方向居中對(duì)齊
mainAxisAlignment: MainAxisAlignment.center,
// 水平方向居左對(duì)齊
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
// 名字
Text(
itemModel.name,
maxLines: 1,
),
// 類型
Text(
itemModel.type,
maxLines: 1,
),
// 簡介
Text(itemModel.description),
],
),
),
Padding(
// Padding 控件，用來設(shè)置 FlatButton 內(nèi)邊距
// 右邊距為 10，其余均為 0
padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
child: FlatButton(
// 按鈕背景顏色
color: Color(0xFFF1F0F7),
// 按鈕點(diǎn)擊后顏色
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,
),
),
],
);
}
}
// 控件數(shù)據(jù)實(shí)體類
class ItemModel {
String icon;
String rank;
String name;
String type;
String description;
ItemModel({this.icon, this.rank, this.name, this.type, this.description});
}
示例圖如下所示：
按照從上到下，從左到右去拆解 UI 的布局結(jié)構(gòu)，把復(fù)雜的 UI 分解成各個(gè)小 UI 元素，在以組裝的方式去定義 UI 中非常有用。
自繪
Flutter 提供了非常豐富的控件和布局方式，使得我們可以通過組合去構(gòu)建一個(gè)新的視圖。但對(duì)于一些不規(guī)則的視圖，用 SDK 提供的現(xiàn)有 Widget 組合可能無法實(shí)現(xiàn)，比如餅圖，k 線圖、貝塞爾曲線等，這個(gè)時(shí)候我們就需要自己用畫筆去繪制了。
在原生 iOS 和 Android 開發(fā)中，我們可以繼承 UIView/View，在 drawRect/onDraw 方法里進(jìn)行繪制操作。其實(shí)，在 Flutter 中也有類似的方案，那就是 CustomPaint。
CustomPaint 是用以承接自繪控件的容器，并不負(fù)責(zé)真正的繪制。既然是繪制，那就需要用到畫布與畫筆。
在 Flutter 中，畫布是 Canvas，畫筆則是 Paint，而畫成什么樣子，則由定義了繪制邏輯的 CustomPainter 來控制。將 CustomPainter 設(shè)置給容器 CustomPaint 的 painter 屬性，我們就完成了一個(gè)自繪控件的封裝。
對(duì)于畫筆 Paint，可以配置它的各種屬性，比如顏色、樣式、粗細(xì)等；而畫布 Canvas，則提供了各種常見的繪制方法，比如畫線 drawLine、畫矩形 drawRect、畫點(diǎn) drawPoint、畫路徑 drawPath、畫圓 drawCircle、畫圓弧 drawArc 等。
這樣，我們就可以在 CustomPainter 的 paint 方法里，通過 Canvas 與 Paint 的配合，實(shí)現(xiàn)定制化的繪制邏輯。
示例：
首先，創(chuàng)建 WheelPainter 類繼承 CustomPainter，在定義了繪制邏輯的 paint 方法中，通過 Canvas 的 drawArc 方法，用 6 種不同顏色的畫筆依次畫了 6 個(gè) 1/6 圓弧，拼成了一張餅圖。最后，我們使用 CustomPaint 容器，將 painter 進(jìn)行封裝，就完成了餅圖控件 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>[
// 組合控件，并傳入構(gòu)造參數(shù)
GroupViewWidget(
itemModel: ItemModel(
icon: 'assets/icon.png',
rank: '1',
name: '簡書',
description: '創(chuàng)造你的創(chuàng)造',
type: '文學(xué)創(chuàng)造'),
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 控件，用來設(shè)置 Image 控件內(nèi)邊距
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 控件，用來拉伸中間區(qū)域
Expanded(
// Column 控件，用來垂直擺放子 Widget
child: Column(
// 垂直方向居中對(duì)齊
mainAxisAlignment: MainAxisAlignment.center,
// 水平方向居左對(duì)齊
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
// 名字
Text(
itemModel.name,
maxLines: 1,
),
// 類型
Text(
itemModel.type,
maxLines: 1,
),
// 簡介
Text(itemModel.description),
],
),
),
Padding(
// Padding 控件，用來設(shè)置 FlatButton 內(nèi)邊距
// 右邊距為 10，其余均為 0
padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
child: FlatButton(
// 按鈕背景顏色
color: Color(0xFFF1F0F7),
// 按鈕點(diǎn)擊后顏色
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,
),
),
],
);
}
}
// 控件數(shù)據(jù)實(shí)體類
class ItemModel {
String icon;
String rank;
String name;
String type;
String description;
ItemModel({this.icon, this.rank, this.name, this.type, this.description});
}
// 將餅圖封裝成一個(gè)新的控件
class WheelWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CustomPaint(
// 設(shè)置控件寬高
size: Size(200, 200),
painter: WheelPaint(),
);
}
}
// 自繪控件
class WheelPaint extends CustomPainter {
// 設(shè)置畫筆顏色，返回不同顏色畫筆
Paint getColorPaint(Color color) {
// 生成畫筆
Paint paint = Paint();
// 設(shè)置畫筆顏色
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;
// 包裹餅圖這個(gè)圓形的矩形框
Rect boundingRect = Rect.fromCircle(center: Offset(wheelSize, wheelSize), radius: wheelSize);
// 每次畫 1/6 個(gè)圓弧
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 進(jìn)行自繪控件并不算復(fù)雜。
總結(jié)
在實(shí)現(xiàn)視覺需求上，自繪需要自己親自處理繪制邏輯，而組合則是通過子 Widget 的拼接來實(shí)現(xiàn)繪制意圖。因此從渲染邏輯處理上，自繪方案可以進(jìn)行深度的渲染定制，從而實(shí)現(xiàn)少數(shù)通過組合很難實(shí)現(xiàn)的需求（比如餅圖、k 線圖）。不過，當(dāng)視覺效果需要調(diào)整時(shí)，采用自繪的方案可能需要大量修改繪制代碼，而組合方案則相對(duì)簡單：只要布局拆分設(shè)計(jì)合理，可以通過更換子 Widget 類型來輕松搞定。
