时间戳

首页 > 解决方案 > 为什么 Flutter IconButton 动画显示在行下

flutter - 为什么 Flutter IconButton 动画显示在行下

问题描述

在我的应用程序中，我设置了一个 IconButton 来渲染具有颜色背景的 Row。不幸的是，按钮按下时的波纹动画呈现在 Row 下（如截屏视频所示）。我如何在行上显示波纹？

class Card extends StatelessWidget {
final Issue issue;
Color _bgColor;

Card({this.issue}) {
  _bgColor = colorSwatch[issue.hashCode % colorSwatch.length];
}

@override
Widget build(BuildContext context) {
  return Container(
    margin: EdgeInsets.only(top: 12, left: 18, right: 18),
    padding: EdgeInsets.only(top: 8, bottom: 8),
    decoration: new BoxDecoration(
      color: _bgColor,
      border: new Border.all(color: _bgColor),
      borderRadius: BorderRadius.all(
          Radius.circular(10.0) 
          ),
    ),
    child: Row(children: [
      IconButton(
        padding: EdgeInsets.only(right: 16),
        icon: Icon(Icons.play_arrow, color: Colors.white, size: 48),
        tooltip: 'Start ${issue.issueName}',
        onPressed: () {},
      ),
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              padding: const EdgeInsets.only(bottom: 8),
              child: Text(
                issue.title,
                style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                ),
                softWrap: true,
              ),
            ),
            Text(
              issue.issueName,
              style: TextStyle(
                color: Colors.white,
              ),
            ),
          ],
        ),
      ),
    ]));
  }
}

截屏

标签： flutterflutter-animation

解决方案

波纹是Material效果的一部分。用：IconButton_Material

Material(
  color: _bgColor,
  child: IconButton(
    padding: EdgeInsets.only(right: 16),
    icon: Icon(Icons.play_arrow, color: Colors.white, size: 48),
    tooltip: 'Start ${issue.issueName}',
    onPressed: () {},
  ),
),

更新

为了更具体地实现您的目标，您可以将您的替换Container为Material.

return Material(
  color: _bgColor,
  borderRadius: BorderRadius.all(Radius.circular(10.0)),
  child: Container(
     margin: EdgeInsets.only(top: 12, left: 18, right: 18),
     padding: EdgeInsets.only(top: 8, bottom: 8),
     backgroundBlendMode: BlendMode.multiply,
     child: Row(
     ...
  ),
);

推荐阅读