如何创建超出 GridView 图像的墨水飞溅？答案

【问题标题】：How to create ink splash that extends beyond GridView image?如何创建超出 GridView 图像的墨水飞溅？
【发布时间】：2018-04-12 18:35:21
【问题描述】：

我正在尝试创建一个图像网格，每个图像的右上角都有一个“共享”按钮。问题是 IconButton 的墨水飞溅没有超出图像边框。此外，IconButton 上似乎有墨水飞溅和 InkWell 中的墨水飞溅 - 按钮上应该只有一个飞溅。

我知道墨水飞溅是在材质层上渲染的，但我似乎无法使该层超出图像的边界。谁能建议如何做到这一点？

截图如下：

代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

_buildGrid() {
  List<String> imgs = [
    "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Three_Sisters_Sunset.jpg/1280px-Three_Sisters_Sunset.jpg",
    "https://upload.wikimedia.org/wikipedia/commons/c/c0/Opera_House_and_ferry._Sydney.jpg",
    "https://upload.wikimedia.org/wikipedia/commons/b/b0/State_Library_of_New_South_Wales_Reading_Room_2017.jpg",
    "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Sydney_Harbour_Bridge_from_Circular_Quay.jpg/2880px-Sydney_Harbour_Bridge_from_Circular_Quay.jpg",
    "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/Amptower_centerpoint.jpg/800px-Amptower_centerpoint.jpg",
    "https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Summer_at_Manly_Beach.jpg/2560px-Summer_at_Manly_Beach.jpg",
    "https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Glasshouse.JPG/2560px-Glasshouse.JPG"
  ];
  return new GridView.extent(
    primary: true,
    padding: const EdgeInsets.all(20.0),
    crossAxisSpacing: 20.0,
    mainAxisSpacing: 20.0,
    maxCrossAxisExtent: 200.0,
    childAspectRatio: 210.0 / 130.0,
    children: imgs.map((id) => _buildThumbnail(id)).toList(),
  );
}

_buildThumbnail(String url) {
  return new Container(
    decoration: new BoxDecoration(
      border: new Border.all(
        color: Colors.black45,
        width: 1.0,
      ),
    ),
    child: new Stack(
      fit: StackFit.expand,
      children: <Widget>[
        new Center(
          child: new Icon(
            Icons.image,
            color: Colors.black45,
          ),
        ),
        new Image.network(
          url,
          fit: BoxFit.cover,
          key: new Key("thumnail-$url"),
          gaplessPlayback: false,
        ),
        new Material(
          type: MaterialType.transparency,
          child: new InkWell(
            onTap: () => print("Open image: $url"),
            child: new Align(
              alignment: FractionalOffset.topRight,
              child: new IconButton(
                  splashColor: Colors.red,
                  icon: new Icon(Icons.share),
                  onPressed: () => print("Share image: $url"),
                  color: Colors.black87),
            ),
          ),
        ),
      ],
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Grid Splash',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Grid Splash'),
        ),
        body: _buildGrid(),
      ),
    );
  }
}

【问题讨论】：

标签： flutter

【解决方案1】：

使用 InkResponse 小部件来封装按钮小部件。

编辑：不要忘记 enableFeedback 属性。

new InkResponse(splashColor: someColor, enableFeedback: true, child: new IconButton(...) )

【讨论】：

这不会改变任何问题。
“材质中响应触摸的区域。具有可配置的形状，可以配置为剪辑超出其边界的飞溅。”
这是来自 InkResponse 文档。在我的代码中也为我做了诀窍。
@sofakingforever 我尝试使用 InkResposne，但没有成功。具体来说，我尝试将“new IconButton(...)”替换为“new InkResponse(child: new IconButton(...)”。我还尝试将 IconButton 替换为 Icon，然后将点击回调放入 InkResponse - 它仍然没有不行。
@Mark 现在我正在查看代码，也许您没有尝试 enableFeedback 属性。 new InkResponse( splashColor: someColor, enableFeedback: true, child: new IconButton(...)) 那对我有用。