Flutter: Flutter: как улучшить этот эффект Slivers - PullRequest
Новая
       93

Flutter: Flutter: как улучшить этот эффект Slivers

1 голос
/ 03 августа 2020

сначала извините за мой плохой английский sh, я постараюсь объяснить себя как можно лучше

Я сделал элемент из списка с таким эффектом:

введите описание изображения здесь

Когда я прокручиваю, чтобы заполнить нижние поля, размер изображения будет уменьшен до минимальной высоты, размер шрифта плоской кнопки и непрозрачность плоской кнопки тоже.

Вопрос в том, : Как сделать эффект более плавным, чтобы кнопка всегда оставалась на одинаковом расстоянии от изображения?

Это код: 

SliverPersistentHeader makeHeader(bool pinned) {
    return SliverPersistentHeader(
      pinned: pinned,
      floating: true,
      delegate: _SliverAppBarDelegate(
        minHeight: 60.0,
        maxHeight: 200.0,
      ),
    );
  }

The _SliverAppBarDelegate: 

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  final double minHeight;
  final double maxHeight;
  final bool hideButtonWhenExpanded;

  _SliverAppBarDelegate(
      {@required this.minHeight,
      @required this.maxHeight,
      this.hideButtonWhenExpanded = true});

  @override
  double get minExtent => minHeight;
  @override
  double get maxExtent => math.max(maxHeight, minHeight);
  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    final appBarSize = maxHeight - shrinkOffset;
    final proportion = 2 - (maxHeight / appBarSize);
    final photoToButton = 160 * proportion;
    final percent = proportion < 0 || proportion > 1 ? 0.0 : proportion;
    return new SizedBox.expand(
      child: Container(
        color: Colors.white,
        child: Stack(
          alignment: Alignment.topCenter,
          children: <Widget>[
            Positioned(
              top: 10.0,
              child: CircleAvatar(
                minRadius: 20.0,
                maxRadius: 75.0 * proportion > 20 ? 75.0 * proportion : 20.0,
                backgroundImage: NetworkImage(
                    'https://t3.ftcdn.net/jpg/02/33/46/24/240_F_233462402_Fx1yke4ng4GA8TJikJZoiATrkncvW6Ib.jpg'),
              ),
            ),
            Positioned(
              left: 0.0,
              right: 0.0,
              top: photoToButton,
              child: Opacity(
                opacity: percent,
                child: FlatButton(
                  onPressed: () {},
                  child: Text(
                    'Add Photo',
                    style: TextStyle(
                        color: Colors.blue, fontSize: 14.0 * proportion),
                  ),
                ),
              ),
            ),
            Positioned(
              left: 0.0,
              right: 0.0,
              top: appBarSize - 1.0 > 59.0 ? appBarSize - 1 : 59.0,
              child: const Divider(
                height: 1,
                thickness: 0.5,
              ),
            )
          ],
        ),
      ),
    );
  }

  @override
  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
    return maxHeight != oldDelegate.maxHeight ||
            minHeight !=
                oldDelegate
                    .minHeight
        ;
  }
}

Буду всем благодарен за помощь

1 Ответ

2 голосов
/ 03 августа 2020

Вы можете использовать Flex и Flexible в _SliverAppBarDelegate: 

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    final appBarSize = maxHeight - shrinkOffset;
    final proportion = 2 - (maxHeight / appBarSize);
    final photoToButton = 160 * proportion;
    final percent = proportion < 0 || proportion > 1 ? 0.0 : proportion;
    return Flex(
      direction: Axis.vertical,
      children: <Widget>[
        Flexible(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Flexible(
                flex: 8,
                child: CircleAvatar(
                  minRadius: 20.0,
                  maxRadius: 75.0 * proportion > 20 ? 75.0 * proportion : 20.0,
                  backgroundImage: NetworkImage(
                      'https://t3.ftcdn.net/jpg/02/33/46/24/240_F_233462402_Fx1yke4ng4GA8TJikJZoiATrkncvW6Ib.jpg'),
                ),
              ),
              Flexible(
                flex: 2,
                child: Opacity(
                  opacity: percent,
                  child: FlatButton(
                    onPressed: () {},
                    child: Text(
                      'Add Photo',
                      style: TextStyle(
                          color: Colors.blue, fontSize: 14.0 * proportion),
                    ),
                  ),
                ),
              ),
              const Divider(
                height: 1,
                thickness: 0.5,
              ),
            ],
          ),
        ),
      ],
    );
  }

Результат:

res

...