flutter - 如何使 IconButton 的突出显示颜色出现在父小部件上？

Question

当我设置包含 IconButton 的 Container 的颜色时，我发现 IconButton 的突出显示颜色被容器的颜色隐藏了。这就是我的意思:

如何确保蓝色圆圈出现在红色方 block 的上方？

这是我的代码:

import 'dart:ui';
import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new MyDemo()));
}

class MyDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Container(
          width: 60.0,
          height: 60.0,
          color: Colors.red,
          child: new IconButton(
            highlightColor: Colors.blue,
            icon: new Icon(Icons.add_a_photo), onPressed: ()=>{},),
        ),
      ),
    );
  }
}

Answer 1

InkSplash 发生在最近的祖先 Material小部件。

您可以使用 Material.of(context) 获取该小部件，它为 InkSplashes 提供了一些帮助程序。

在您的情况下，它是由 IconButton 实例化的 InkResponse这会引发飞溅效果。但是有针对性的Material小部件由 Scaffold 实例化。这是你背景的祖先。因此背景会在您的 InkSplash 上方绘制。

要解决这个问题，您必须在背景和 IconButton 之间引入一个新的 Material 实例。

这导致:

嗯，我们解决了这个问题。但现在它被裁剪了!让我们继续。

最简单的选择是将渲染分成两个分支。一个用于背景，一个用于 UI。类似的东西应该可以解决问题:

return new Scaffold(
  body: new Stack(
    fit: StackFit.expand,
    children: <Widget>[
      new Center(
        child: new Container(
          height: 60.0,
          width: 60.0,
          color: Colors.red,
        ),
      ),
      new Material(
        type: MaterialType.transparency,
        child: new IconButton(
          highlightColor: Colors.blue,
          icon: new Icon(Icons.add_a_photo),
          onPressed: () => {},
        ),
      ),
    ],
  ),
);