Question

我是Flutter的新手，正在研究带有多项选择题的测验应用程序。每个可能的答案都呈现为ListTile小部件：

return ListTile(
  title: Text(answer),
  onTap: hasAnswered ? () { _answer(answer); } : null,
);

现在，当用户选择答案时，我想以绿色突出显示正确的答案。很容易，我们将其包装在Container中：

return Container(
  color: isCorrectAnswer ? Colors.green : null,
  child: ListTile(
    title: Text(answer),
    onTap: hasAnswered ? () { _answer(answer); } : null,
  ),
);

下一步是设置背景动画，使其逐渐显示。 我希望它以圆圈的形式生长，从ListItem的中心开始，一直向外扩展直到覆盖整个小部件，就像Material自己的墨水波纹一样。

我还没有弄清楚Flutter的动画框架，但是在我开始之前，让我们绘制一个固定大小的圆。轻松自在：

return Container(
  decoration: isCorrectAnswer ?
    BoxDecoration(shape: BoxShape.circle, color: Colors.green) :
    null,
  child: ListTile(
    title: Text(answer),
    onTap: hasAnswered ? () { _answer(answer); } : null,
  ),
);

现在，圆弧紧密贴合在小部件的顶部和底部边缘之间。如何控制此圆圈的大小？无法设置BoxShape.circle的半径；根据文档，“圆的直径是盒子的最短尺寸，宽度或高度，以使圆接触盒子的边缘。”

我的下一个想法是使用径向渐变：

return Container(
  decoration: isCorrectAnswer ?
    BoxDecoration(
      shape: BoxShape.rectangle,
      gradient: RadialGradient(
        radius: 0.5,
        colors: [color, color, Colors.transparent],
        stops: [0.0, 1.0, 1.0],
      ),
    ) :
    null,
  child: ListTile(
    title: Text(answer),
    onTap: hasAnswered ? () { _answer(answer); } : null,
  ),
);

这使我可以控制radius。但是同样，半径是相对于小部件的最短边缘的，所以我如何知道应将其用作动画终点的半径？当然，我可以将radius的动画从0.0设置为一个较大的值，如10.0，但这很容易破解，动画也无法正常播放。

我尝试设置radius: 0.5 * context.size.longestSide / context.size.shortestSide，它应该完全覆盖小部件。但这会导致错误，因为在构建期间不允许访问size。

我还查看了Ink，InkWell，InkRipple，InkFeature和InkResponse类，以了解我是否可以以某种方式利用Material自身的波动绘制代码，但我似乎找不到如何手动触发代码的方法。

那么，如何以一种可以使半径从零到小部件对角线长度的一半进行动画的方式来创建这种效果？

如何为逐渐增长的圆圈设置动画以填充小部件的背景？

0 个答案: