Блог

Привет, я пытаюсь правильно выровнять некоторые значки по прямой линии, но по какой-то причине один из них немного ниже другого, и я не могу понять, почему вы можете увидеть изображение ниже для получения дополнительной информации о том, что я подразумеваю под неправильным выравниванием. А также код для кнопки «Избранное» и главного виджета.

код сердечной кнопки:

 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))
              ],
            ),
          ]
        ],
      ),
    );
 

Вы можете использовать const Spacer() то, что займет все пространство, поэтому элементы будут сдвинуты до конца.

Примените свойство CrossAxisAlignment к виджету столбцов и строк в соответствии с вашими требованиями.