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

设置包含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: ()=>{},),
        ),
      ),
    );
  }
}

最佳答案

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

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

在您的情况下，它是由 InkResponse 实例化的IconButton的，它会引起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: () => {},
        ),
      ),
    ],
  ),
);