Масштабирование содержимого при перетаскивании во Flutter - PullRequest
Новая
       49

Масштабирование содержимого при перетаскивании во Flutter

0 голосов
/ 24 сентября 2019

Я хочу, чтобы не достигать этого поведения во Flutter.

Знаете ли вы, есть ли во Flutter встроенный виджет, который обеспечивает эту функциональность из коробки?

1 Ответ

0 голосов
/ 25 сентября 2019

попробуйте CustomScrollView: 

LayoutBuilder(
  builder: (context, constraints) {
    return CustomScrollView(
      slivers: <Widget>[
        SliverPersistentHeader(
          pinned: true,
          delegate: Delegate(),
        ),
        SliverToBoxAdapter(
          child: Container(
            decoration: BoxDecoration(
              borderRadius:  BorderRadius.all(Radius.circular(30)),
              border:  Border.all(
                width: 2.0,
                color:  Colors.deepPurple,
              ),
            ),
            height: constraints.biggest.height,
            child: Center(
              child: Text('Drag me down (or up) in order to see (or hide) the red icon on the top',
                textAlign: TextAlign.center,
                textScaleFactor: 5.0,
              ),
            ),
          ),
        ),
      ],
    );
  }
),

класс «делегат» выглядит следующим образом: 

class Delegate extends SliverPersistentHeaderDelegate {
  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    // print(shrinkOffset);
    return Opacity(
      opacity: 1 - shrinkOffset / maxExtent,
      child: FittedBox(child: Icon(Icons.alarm, color: Colors.red,), fit: BoxFit.contain),
    );
  }
  @override double get maxExtent => 300;
  @override double get minExtent => 100;
  @override bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => true;
}

теперь попробуйте перетащить текст вверх и вниз

РЕДАКТИРОВАТЬ : и это небольшое изменение, похожее на ваш пример: 

LayoutBuilder(
  builder: (context, constraints) {
    return CustomScrollView(
      slivers: <Widget>[
        SliverPersistentHeader(
          pinned: true,
          delegate: Delegate(),
        ),
        SliverToBoxAdapter(
          child: Container(
            padding: EdgeInsets.only(top: 75),
            height: constraints.biggest.height,
            child: Text('Drag me down (or up) in order to make the red icon bigger (or smaller)',
              textAlign: TextAlign.center,
              textScaleFactor: 5.0,
            ),
          ),
        ),
      ],
    );
  }
),

и модифицированный класс делегата: 

class Delegate extends SliverPersistentHeaderDelegate {
  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    // print(shrinkOffset);
    return Stack(
      overflow: Overflow.visible,
      children: <Widget>[
        Positioned.fill(
          bottom: -100,
          child:  FittedBox(child: Icon(Icons.alarm, color: Colors.red,), fit: BoxFit.contain),
        ),
      ],
    );
  }
  @override double get maxExtent => 300;
  @override double get minExtent => 1;
  @override bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => true;
}
...