Question

我正在尝试使用每个图片右上角的“分享”按钮创建一个图像网格。问题是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(),
      ),
    );
  }
}

Answer 1

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

编辑：不要忘记enableFeedback属性。

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

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

1 个答案: