使用snapList和SliverPersistentHeader处理动态高度变化(调整大小)

时间:2020-01-05 14:14:05

标签: android ios flutter

我正在尝试调整放置在SliverView内的listView项目的大小, 到目前为止还算不错,但是问题是,每当条子收缩和ListViewItem的大小发生变化时,我都无法将当前的ListViewItem保持在左角。

Here is a video that showcases what is going on

Here is a link to what I want to achieve (是否有更好的方法可以达到预期的效果?)

这是缩小之前的图片

enter image description here

这是条子收缩时的图片(您会注意到列表项已移到角落并且没有在视图中显示)

enter image description here

这是我的代码

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:movie_order/SizeConfig/sizeConfig.dart';
import 'package:snaplist/snaplist.dart';

class MoviePageHeader implements SliverPersistentHeaderDelegate {
  MoviePageHeader(

      {@required this.minExtent,
      @required this.maxExtent,
      @required this.movieScrollController,
      @required this.parentScrollController,
      });
  final double minExtent;
  final double maxExtent;
  final ScrollController movieScrollController;  
  PageController _moviePageController = PageController(viewportFraction: 0.7);
  double scaleValue=0;
  double value = 1;
  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Column(
      children: <Widget>[
        Expanded(
          child: Container(
            width: SizeConfig.horizontalBloc * 100,
            color: Colors.green,
            child: SafeArea(
              child: Column(
                  children: <Widget>[
                    Expanded(
                      flex: 2,
                      child: Padding(
                        padding: const EdgeInsets.only(left: 8.0),
                        child: Align(
                          alignment: Alignment.centerLeft,
                          child: Transform.scale(
                            scale: 1 -
                ((max(0, shrinkOffset / 550) / (maxExtent * 2))),
                            origin: Offset(-SizeConfig.verticalBloc * 35,
                -SizeConfig.verticalBloc * 30),
                            child: Text(
              'Popular now',
              style: TextStyle(
                  fontSize: SizeConfig.safeBlockHorizontal * 8 -
                      (max(SizeConfig.safeBlockHorizontal * 9,
                              shrinkOffset * 10) /
                          (maxExtent)),
                  decoration: TextDecoration.none),
                            ),
                          ),
                        ),
                      ),
                    ),
                    Expanded(
                      flex: 12,
                      child: ListView.builder(
                        controller: movieScrollController,
                        itemCount: 4,
                        scrollDirection: Axis.horizontal,
                        itemBuilder: (context, index) {
                          return AnimatedBuilder(
                            animation: movieScrollController,
                            builder: (BuildContext context, Widget child) {
              if (movieScrollController.position.haveDimensions) {
                value = (1 - (value.abs() * 0.6)).clamp(0.0, 1.0);
              }
              return Padding(
                padding: const EdgeInsets.all(4.0),
                child: Transform.scale(
                  scale: 1 -
                      ((max(0, shrinkOffset / 200) /
                          (maxExtent * 2))),
                  origin: Offset(-SizeConfig.verticalBloc * 35,
                      -SizeConfig.verticalBloc * 30),
                  child: Container(
                    //This is what controls the width of the shrink part
                    width: SizeConfig.horizontalBloc * 55 -((max(0, shrinkOffset * 100) /(maxExtent))),
                     //(SizeConfig.horizontalBloc * 55)+((max(0, shrinkOffset/200) / (maxExtent*2))),
                    color: Colors.pink,
                  ),
                ),
              );
                            },
                          );
                        },
                      ),
                    ),
                  ],
                ),
            ),
          ),
        ),
      ],
    );
  }

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
    return maxExtent != oldDelegate.maxExtent ||
        minExtent != oldDelegate.minExtent;
  }

  @override
  // TODO: implement snapConfiguration
  FloatingHeaderSnapConfiguration get snapConfiguration => null;

  @override
  // TODO: implement stretchConfiguration
  OverScrollHeaderStretchConfiguration get stretchConfiguration => OverScrollHeaderStretchConfiguration(
    stretchTriggerOffset: 2333,
    onStretchTrigger: (){
      print('hii');
      return null;
    }
  );


}

注意:这是我自动更改项目宽度的方式(以防您不想阅读整个代码)

width: SizeConfig.horizontalBloc * 55 -((max(0, shrinkOffset * 100) /(maxExtent))),

0 个答案:

没有答案