如何使IconButton的高亮颜色显示在父窗口小部件上？

Question

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

如何确保蓝色圆圈上方红色方块？

这是我的代码：

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会激发Splash效果。 但目标Material窗口小部件由Scaffold实例化。这是你背景的祖先。因此，背景在InkSplash上​​方绘制。

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

导致：

是的，我们解决了这个问题。但现在它被裁掉了！ 让我们继续吧。

最简单的选择是将渲染分成两个分支。一个用于后台，一个用于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: () => {},
        ),
      ),
    ],
  ),
);