点击带有渐变叠加的IconButton会中断

Question

我有一个IconButton，上面有一个渐变叠加层，

Container(
    foregroundDecoration: BoxDecoration(
        gradient: LinearGradient(
            colors: [Colors.orange.shade100, Colors.orange.shade900], 
            begin: Alignment(0, 0), 
            end: Alignment(0, 1)
        ), 
        backgroundBlendMode: BlendMode.screen
    ),
    child: IconButton(
        icon: Icon(Icons.add_box),
        iconSize: 36,
        color: Colors.black,
        onPressed: (){},
    ),
);

在我点击它之前看起来不错，然后渐变突然覆盖了整个Container（和IconButton）并停留在那里。

有没有一种方法可以防止它在点击时破裂？

Answer 1

您可以选择将图标包装在容器中，而不是包装整个IconButton。

      IconButton(
        icon: Container(
          foregroundDecoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [Colors.orange.shade100, Colors.orange.shade900],
                begin: Alignment(0, 0),
                end: Alignment(0, 1),
              ),
              backgroundBlendMode: BlendMode.screen),
          child: Icon(Icons.add_box),
        ),
        iconSize: 36,
        color: Colors.black,
        onPressed: () {},
      ),