Возможно ли иметь эффекты «расширения» и «сжатия» с полосками во Флаттере? - PullRequest
Новая
       37

Возможно ли иметь эффекты «расширения» и «сжатия» с полосками во Флаттере?

0 голосов
/ 11 марта 2020

Я реализовал экран с CustomScrollView, SliverAppBar и FlexibleSpaceBar, например:

enter image description here

Теперь я Я застрял, пытаясь расширить функциональность, пытаясь воспроизвести следующий эффект:

Развернуть изображение на весь экран при прокрутке

Можно ли что-то подобное сделать с помощью slivers во флаттере?

По сути, я хочу, чтобы изображение открывалось в исходном размере при открытии экрана, но в зависимости от направления прокрутки оно должно анимироваться -> контракт / исчезать (сохраняя функциональность прокрутки списка) или расширяться до полноэкранного режима. (возможно, по новому маршруту?).

Пожалуйста, помогите, поскольку я не уверен, в каком направлении мне следует go.

Вот код для вышеприведенного экрана: 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  static const double bottomNavigationBarHeight = 48;

  @override
  Widget build(BuildContext context) => MaterialApp(
        debugShowCheckedModeBanner: false,
        home: SliverPage(),
      );
}

class SliverPage extends StatefulWidget {
  @override
  _SliverPageState createState() => _SliverPageState();
}

class _SliverPageState extends State<SliverPage> {
  double appBarHeight = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        physics: AlwaysScrollableScrollPhysics(),
        slivers: <Widget>[
          SliverAppBar(
            centerTitle: true,
            expandedHeight: MediaQuery.of(context).size.height * 0.4,
            pinned: true,
            flexibleSpace: LayoutBuilder(builder: (context, boxConstraints) {
              appBarHeight = boxConstraints.biggest.height;
              return FlexibleSpaceBar(
                centerTitle: true,
                title: AnimatedOpacity(
                    duration: Duration(milliseconds: 200),
                    opacity: appBarHeight < 80 + MediaQuery.of(context).padding.top ? 1 : 0,
                    child: Padding(padding: EdgeInsets.only(bottom: 2), child: Text("TEXT"))),
                background: Image.network(
                  'https://images.pexels.com/photos/443356/pexels-photo-443356.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
                  fit: BoxFit.cover,
                ),
              );
            }),
          ),
          SliverList(delegate: SliverChildListDelegate(_buildList(40))),
        ],
      ),
    );
  }

  List _buildList(int count) {
    List<Widget> listItems = List();

    for (int i = 0; i < count; i++) {
      listItems.add(
          new Padding(padding: new EdgeInsets.all(20.0), child: new Text('Item ${i.toString()}', style: new TextStyle(fontSize: 25.0))));
    }

    return listItems;
  }
}

1 Ответ

1 голос
/ 13 марта 2020

использование CustomScrollView с SliverPersistentHeader

child: LayoutBuilder(
  builder: (context, constraints) {
    return CustomScrollView(
      controller: ScrollController(initialScrollOffset: constraints.maxHeight * 0.6),
      slivers: <Widget>[
        SliverPersistentHeader(
          pinned: true,
          delegate: Delegate(constraints.maxHeight),
        ),
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (ctx, i) => Container(height: 100, color: i.isOdd? Colors.green : Colors.green[700]),
            childCount: 12,
          ),
        ),
      ],
    );
  },
),

класс Delegate, используемый SliverPersistentHeader, выглядит следующим образом: 

class Delegate extends SliverPersistentHeaderDelegate {
  final double _maxExtent;

  Delegate(this._maxExtent);

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    var t = shrinkOffset / maxExtent;
    return Material(
      elevation: 4,
      child: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          Image.asset('images/bg.jpg', fit: BoxFit.cover,),
          Opacity(
            opacity: t,
            child: Container(
              color: Colors.deepPurple,
              alignment: Alignment.bottomCenter,
              child: Transform.scale(
                scale: ui.lerpDouble(16, 1, t),
                child: Text('scroll me down', 
                  style: Theme.of(context).textTheme.headline5.copyWith(color: Colors.white)),
              ),
            ),
          ),
        ],
      ),
    );
  }

  @override double get maxExtent => _maxExtent;
  @override double get minExtent => 64;
  @override bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => true;
}
...