前言
筆者的Flutter練手專案程式碼都放在flutter_demo，有需要的可以star噢。看完覺得有幫助的話，可以動手點個贊?。
主題
今天分享的是一個常用功能——水紋按壓效果，效果如下:
這個效果就是安卓手機常見的按壓水紋效果。
例子
看完效果，我們開始進入寫例子的環節，其例項子就是上圖，是我模仿Gmail做的一個效果圖：
主體框架就是安卓的Drawer效果，對於Drawer，Flutter支援的很好，使用起來很簡單，如下：
@override
Widget build(BuildContext context) {
final currentPage = _getDrawerItemWidget(_selectedPageKey);
return Scaffold(
appBar: Common.appBar(title: currentPage.title),
extendBody: true,
drawer: _buildDrawer(),
body: currentPage,
);
}
_buildDrawer() {
List<Widget> drawerOptions = [];
widget.drawerItems.forEach((String key, DrawerItem item) => drawerOptions.add(
DrawerRippleItem(
iconPath: item.iconPath,
title: item.title,
highlightColor: item.highlightColor,
contentHighlightColor: item.contentHighlightColor,
isSelect: key == _selectedPageKey,
tapCallback: () => _onSelectItem(key),
)
));
return Drawer(
child: Container(
color: Colors.white,
child: Column(
children: <Widget>[
Container(
height: 100,
margin: EdgeInsets.fromLTRB(16, 32, 0, 0),
child: Center(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[Common.circleAvatar(size: 64.0, path: "ic_default_avatar.webp")],
),
),
),
Column(children: drawerOptions)
],
)));
}
複製程式碼就是在Scaffold這個腳手架Widget增加一個drawer屬性即可，具體我也不細講，感興趣可以看完整程式碼。
說回水紋按壓，需要用到三個widget，分別是Material，Ink, InkWell。Material就是提供安卓設計風格的支援，Ink翻譯過來就是油墨的意思，是水紋效果的外層容器，相當於Container，InkWell則是水紋的真實容器，其中包含水紋顏色等屬性，程式碼如下：
import 'package:flutter/material.dart';
class RippleItem extends StatelessWidget {
RippleItem({Key key,
this.isSelect = false,
this.itemHeight = 48.0,
this.highlightColor = const Color(0xFFE1F5FE),
this.normalColor = Colors.white,
this.rippleColor,
this.tapCallback,
this.borderRadius = const BorderRadius.all(Radius.zero),
this.content,
}) : super(key: key);
final bool isSelect;
final double itemHeight;
final Color normalColor;
final Color highlightColor;
final Color rippleColor;
final GestureTapCallback tapCallback;
final BorderRadius borderRadius;
final Widget content;
@override
Widget build(BuildContext context) {
return Material(
color: normalColor,
child: Ink(
decoration: BoxDecoration(
color: isSelect ? highlightColor : normalColor,
borderRadius: borderRadius
),
child: InkWell(
splashColor: rippleColor != null ? rippleColor : Theme.of(context).splashColor,
borderRadius: borderRadius,
onTap: tapCallback,
child: Container(
height: itemHeight,
child: content,
))));
}
}
複製程式碼可以發現在Flutter中，視覺效果就是Widget的疊加，俗稱巢狀地獄。在完成了RippleItem的封裝後，我在之上又加了DrawerRippleItem的封裝，如下：
import 'package:flutter/material.dart';
import 'package:flutter_demo/widget/ripple_item.dart';
import '../common_widget.dart';
class DrawerRippleItem extends StatelessWidget {
DrawerRippleItem({
Key key,
this.isSelect = false,
this.iconPath,
@required this.title,
this.highlightColor,
this.contentHighlightColor,
this.tapCallback,
}) : super(key: key);
final String iconPath;
final String title;
final Color highlightColor;
final Color contentHighlightColor;
final bool isSelect;
final GestureTapCallback tapCallback;
final Color normalColor = Color(0xFF262d50);
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(right: 4.0),
child: RippleItem(
isSelect: isSelect,
tapCallback: tapCallback,
highlightColor: highlightColor,
borderRadius: BorderRadius.only(
topRight: Radius.circular(24.0),
bottomRight: Radius.circular(24.0),
),
content: Container(
padding: EdgeInsets.only(left: 24.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
child: Common.iconImage(path: iconPath,color: isSelect ? contentHighlightColor: normalColor),
margin: EdgeInsets.only(right: 24.0),
),
Common.primarySmallTitle(content: title, color: isSelect ? contentHighlightColor: normalColor)
],
)),
),
);
}
}
複製程式碼其實就是增加了Radius屬性，形成圓角效果，到這裡已經大功告成了。
總結
本篇主要介紹了Flutter的Drawer和水紋效果的簡單使用，在Flutter的世界裡，萬物皆Widget，各種效果也是各種Widget的巢狀，從而達到酷炫的效果。優點是可以組合各種各樣的效果，缺點則是巢狀地獄。
倉庫
點選flutter_demo，檢視完整程式碼。