Question

我正在构建一个任务列表应用程序，我被困在应用一些动画来将已完成任务的图标更改为另一个图标，以表示未完成，反之亦然。

这是我的ListTile，它是列表的一部分，并且包含我要更改的图标。

class _TaskListItemState extends State<TaskListItem> {
  @override
  Widget build(BuildContext context) {
    final taskProvider = Provider.of<TaskProvider>(context, listen: false);
    var completeIcon = widget.task.completed //? Icons.check_circle_outline : Icons.panorama_fish_eye;
                        ? CompletedIcon(ValueKey(1), Icons.check_circle_outline)
                        : CompletedIcon(ValueKey(2), Icons.panorama_fish_eye);

    return ListTile(
        leading: IconButton(
          icon: AnimatedSwitcher(
            duration: const Duration(seconds: 3),
            transitionBuilder: (Widget child, Animation<double> animation) {
              return ScaleTransition(child: child, scale: animation,);
            },
            child: completeIcon,
          ),

          onPressed: () {
            setState(() {
              if (widget.task.completed)
                completeIcon = CompletedIcon(ValueKey(2), Icons.panorama_fish_eye);
              else
                completeIcon = CompletedIcon(ValueKey(1), Icons.check_circle_outline);  
            });

            taskProvider.toggleCompleted(widget.task.id);
          }
        ),

        title: Text(
          widget.task.name,
          style: TextStyle(
            color: Theme.of(context).popupMenuTheme.textStyle.color
          ),
        ),

        trailing: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            widget.task.label
              ? Padding(
                  padding: const EdgeInsets.fromLTRB(0, 0, 2, 0),
                  child: Icon(
                      Icons.label,
                      size: Theme.of(context).iconTheme.size,
                  ),
              )
              : Container(),

            widget.task.dueDate == null
              ? Container()
              : Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 2, vertical: 0),
                  child: Icon(
                    Icons.event_available,
                    size: Theme.of(context).iconTheme.size,
                    color: Theme.of(context).iconTheme.color
                  ),
                ),

            widget.task.reminder
              ? Padding(
                  padding: const EdgeInsets.fromLTRB(2, 0, 0, 0),
                  child: Icon(
                      Icons.notifications,
                      size: Theme.of(context).iconTheme.size,
                      color: Theme.of(context).iconTheme.color,
                  ),
              )
              : Container(),

          ],
        ),
      );
    // );
  }
}

这是我创建的用于分隔图标并更改图标的小部件（不知道是否有必要）

class CompletedIcon extends StatelessWidget {
  final ValueKey key;
  final IconData icon;

  CompletedIcon(this.key, this.icon);

  @override
  Widget build(BuildContext context) {
    return Icon(
      icon,
      key: key,
      color: Theme.of(context).iconTheme.color,
      size: Theme.of(context).iconTheme.size
    );
  }
}

我按照AnimatedSwitcher文档进行了所有这些操作，但是我没有收到任何错误，并且图标没有更改。

任何帮助将不胜感激。谢谢。

Answer 1

您的唯一键丢失了，我知识不多，但是您可以在Animated switcher中搜索有关唯一键的信息。

没有图标的Flutter AnimatedSwitcher

1 个答案: