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

问题描述

当我设置一个包含IconButton的容器的颜色时，我发现IconButton的高亮显示颜色被容器的颜色隐藏了.这就是我的意思:

When I set the color of a Container that holds an IconButton, I find that highlight color of the IconButton is hidden by the color of the container. Here's what I mean:

如何确保蓝色圆圈出现在红色正方形上方?

How can ensure that the blue circle appears above the red square?

这是我的代码:

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 小部件.

InkSplash occurs on the closest ancestor Material widget.

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

You can get that widget using Material.of(context) which provides a few helpers for InkSplashes.

在您的情况下，它是由 IconButton InkResponse >会引起飞溅效果.但是目标 Material 小部件由Scaffold实例化.这是您背景的祖先.因此，背景会在您的InkSplash上​​方绘画.

In your case, it's InkResponse instantiated by IconButton which provoke the Splash effect.But the targeted Material widget is instantiated by Scaffold. Which is an ancestor of your background. Therefore the background paints above your InkSplash.

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

To solve this problem you'd have to introduce a new Material instance between your background and your IconButton.

哪个导致:

嗯，我们解决了这个问题.但是现在已经播种了！让我们继续.

Guh, we solved the problem. But now it's cropped !Let's continue.

最简单的选择是将渲染分为两个分支.一种用于背景，另一种用于UI.类似的方法应该可以解决问题:

The easiest option would be to split your rendering in two branches. One for the background, and one for the UI. Something similar should do the trick :

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: () => {},
        ),
      ),
    ],
  ),
);

这篇关于如何使IconButton的突出显示颜色显示在父窗口小部件上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！