Flutter學習篇(二)—— Drawer和水紋按壓效果

時間 2019-11-06

標籤 flutter 學習 drawer 水紋按壓效果简体版

原文原文鏈接

前言

筆者的Flutter練手項目代碼都放在flutter_demo，有須要的能夠star噢。看完以爲有幫助的話，能夠動手點個贊👍。git

主題

今天分享的是一個經常使用功能——水紋按壓效果，效果以下:github

這個效果就是安卓手機常見的按壓水紋效果。web

例子

看完效果，咱們開始進入寫例子的環節，其實例子就是上圖，是我模仿Gmail作的一個效果圖：app

主體框架就是安卓的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則是水紋的真實容器，其中包含水紋顏色等屬性，代碼以下：less

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的封裝，以下：ide

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)
              ],
            )),
      ),
    );
  }
}
複製代碼