我正在尝试调整放置在SliverView内的listView项目的大小, 到目前为止还算不错,但是问题是,每当条子收缩和ListViewItem的大小发生变化时,我都无法将当前的ListViewItem保持在左角。
Here is a video that showcases what is going on
Here is a link to what I want to achieve (是否有更好的方法可以达到预期的效果?)
这是缩小之前的图片
这是条子收缩时的图片(您会注意到列表项已移到角落并且没有在视图中显示)
这是我的代码
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))),