Flutter学习：Drawer与水波纹按压效果

有一个共同的功能——水纹按压效果，效果如下：

这个效果是安卓手机上常见的按压水纹效果。 ？支持很好，而且非常好用，如下：

  @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 Scaffold 上添加一个抽屉属性即可。我不会详细介绍。如果你有兴趣，可以阅读完整的代码。
说到水纹打印，需要用到三个widget，分别是Material、Ink、InkWell。 Material 提供对 Android 设计风格的支持。 ink翻译为墨水，是水纹效果的外容器，相当于容器。 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的叠加，俗称Nested Hell。完成了RippleItem的封装后，我在上面添加了Drawer的RippleItem的封装，如下：

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查看完整代码。

作者：Young Atao
链接：https://juejin.im/post/5cf3a503e51d4555fd20a2e2
来源：掘金属于作者。如需商业转载，请联系求作者授权。非商业转载请来源。