未正确对齐的图标抖动答案

【问题标题】：Icons not aligned properly flutter未正确对齐的图标抖动
【发布时间】：2021-10-20 14:12:16
【问题描述】：

您好，我正在尝试将一些图标正确对齐在一条直线上，但由于某种原因，其中一个图标略低于另一个图标，我无法弄清楚为什么您可以看到下面的图片以获取更多关于我的意思是不正确的对齐。还有收藏按钮和主窗口小部件的代码。

心形按钮代码：

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class FavoriteButton extends StatefulWidget {
  FavoriteButton({
    double iconSize,
    Color iconColor,
    Color iconDisabledColor,
    bool isFavorite,
    Color defaultFavoritedValue,
    @required Function valueChanged,
    Key key,
  })  : _iconSize = iconSize ?? 60.0,
        _iconColor = iconColor ?? Colors.pink,
        _iconDisabledColor = iconDisabledColor ?? Colors.blue,
        _isFavorite = isFavorite ?? false,
        _valueChanged = valueChanged,
        super(key: key);

  final double _iconSize;
  final Color _iconColor;
  final bool _isFavorite;
  final Function _valueChanged;
  final Color _iconDisabledColor;

  @override
  _FavoriteButtonState createState() => _FavoriteButtonState();
}

class _FavoriteButtonState extends State<FavoriteButton>
    with TickerProviderStateMixin {
  AnimationController _controller;
  Animation<Color> _colorAnimation;

  CurvedAnimation _curve;

  final int _animationTime = 125;

  bool _isFavorite = false;
  bool _isAnimationCompleted = false;

  @override
  void initState() {
    super.initState();

    _isFavorite = widget._isFavorite;

    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: _animationTime),
    );

    _curve = CurvedAnimation(curve: Curves.slowMiddle, parent: _controller);
    Animation<Color> _selectedColorAnimation = ColorTween(
      begin: widget._iconColor,
      end: widget._iconDisabledColor,
    ).animate(_curve);

    Animation<Color> _deSelectedColorAnimation = ColorTween(
      begin: widget._iconDisabledColor,
      end: widget._iconColor,
    ).animate(_curve);

    _colorAnimation = (_isFavorite == true)
        ? _selectedColorAnimation
        : _deSelectedColorAnimation;

    _controller.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        _isAnimationCompleted = true;
        _isFavorite = !_isFavorite;
        widget._valueChanged(_isFavorite);
      } else if (status == AnimationStatus.dismissed) {
        _isAnimationCompleted = false;
        _isFavorite = !_isFavorite;
        widget._valueChanged(_isFavorite);
      }
    });
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (BuildContext context, _) {
        return InkResponse(
          splashColor: Colors.transparent,
          highlightColor: Colors.transparent,
          onTap: () {
            setState(() {
              if (_isAnimationCompleted == true) {
                _controller.reverse();
              } else {
                _controller.forward();
              }
            });
          },
          child: Icon(
            Icons.favorite,
            color: _colorAnimation.value,
            size: 35,
          ),
        );
      },
    );
  }
}

主小部件

Align(
      alignment: Alignment.topLeft,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Column(
            children: [
              FavoriteButton(
                  iconDisabledColor: Theme.of(context).indicatorColor,
                  isFavorite: widget.snapshot,
              ),
              Text("00" + widget.widget.item["likes"].toString(),
                  style: TextStyle(fontFamily: "SemiBold", fontSize: 16))
            ],
          ),
          if (widget.widget._no_loop == false) ...[
            Padding(padding: EdgeInsets.only(left: 15)),
            Column(
              children: [
                Align(
                  alignment: Alignment.topLeft,
                  child: IconButton(
                    splashColor: Colors.transparent,
                    highlightColor: Colors.transparent,
                    hoverColor: Colors.transparent,
                    icon: Icon(
                      Icons.message,
                      color: Theme.of(context).indicatorColor,
                      size: 32,
                    ),
                    color: Colors.transparent,
                  ),
                ),
                Text("000",
                    style: TextStyle(fontFamily: "SemiBold", fontSize: 16))
              ],
            ),
          ]
        ],
      ),
    );

【问题讨论】：

标签： flutter user-interface alignment

【解决方案1】：

您可以使用const Spacer()，它将占用所有空间，因此将元素推到末尾。

【讨论】：

我不是在谈论水平对齐我在谈论垂直对齐。

【解决方案2】：

根据您的要求将 CrossAxisAlignment 属性应用于 Column 和 Row 小部件。

【讨论】：

执行其中任何一项似乎都不能解决此问题，主要问题似乎出在收藏按钮代码中，就好像我用标准 IconButton 替换收藏按钮一样，它完全修复了它，但也删除了动画出现在收藏按钮代码中。