开发了自定义pageView。我需要从右上方更改阴影图标。我无法做到。
完整代码和屏幕截图 https://github.com/devefy/Flutter-Story-App-UI.git
内部支架
Stack(
children: <Widget>[
CardScrollWidget(currentPage),
Positioned.fill(
child: PageView.builder(
itemCount: images.length,
controller: controller,
reverse: true,
//scrollDirection: Axis.vertical, It's change only scrollDirection, not change entire Images
itemBuilder: (context, index) {
return Container();
}))
],
)
控制器
PageController controller = PageController(initialPage: images.length - 1);
controller.addListener(() {
setState(() {
currentPage = controller.page;
});
});
CardScrollWidget类
class CardScrollWidget extends StatelessWidget {
var currentPage;
var padding = 2.0;
var verticalInset = 20.0;
CardScrollWidget(this.currentPage);
@override
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: widgetAspectRatio,
child: LayoutBuilder(
builder: (context, constraint) {
var width = constraint.maxWidth;
var height = constraint.maxHeight;
var safeWidth = width - 2 * padding;
var safeHeight = height - 2 * padding;
var heightPrimaryCard = safeHeight;
var widthPrimaryCard = heightPrimaryCard * cardAspectRatio;
var primaryCardLeft = safeWidth - widthPrimaryCard;
var horizontalInset = primaryCardLeft / 2;
List<Widget> cardList = List();
for (int i = 0; i < images.length; i++) {
var delta = i - currentPage;
bool isOnRight = delta > 0;
var start = padding +
max(
primaryCardLeft -
horizontalInset * -delta * (isOnRight ? 15 : 1),
0.0);
var cardItem = Positioned.directional(
top: padding + verticalInset * max(-delta, 0.0),
bottom: padding + verticalInset * max(-delta, 0.0),
start: start,
textDirection: TextDirection.rtl,
child: Container(
child: AspectRatio(
aspectRatio: cardAspectRatio,
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Image.asset(
images[i],
fit: BoxFit.cover,
)
],
),
),
));
cardList.add(cardItem);
}
return Stack(
children: cardList,
);
}),
);
}
}