BakerJQ / Flutter-InfiniteCards

An infinite card switching UI for Flutter, support custom animation 自定义实现神奇动效的卡片切换视图

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

无法刷新item的UI

q200892907 opened this issue · comments

无法刷新itemUI

请描述详细一些

_controller = InfiniteCardsController(
itemBuilder: _renderItem,
itemCount: 5,
animType: AnimType.SWITCH,
zIndexTransformCommon: _defaultCommonZIndexTransform,
zIndexTransformToBack: _defaultToFrontZIndexTransform,
zIndexTransformToFront: _defaultToFrontZIndexTransform,
);

_renderItem创建子控件时,当前界面有一个全局属性控制子控件一个图片的展示,我setState属性后界面没有刷新

这个是测试代码

import 'dart:math' as math;

import 'package:flutter/material.dart';
import 'package:infinite_cards/infinite_cards.dart';
import 'package:infinite_cards/src/card_item.dart';

class Home extends StatefulWidget {
@OverRide
_HomeState createState() => _HomeState();
}

class _HomeState extends State {
InfiniteCardsController _controller;
bool _isTypeSwitch = true;

@OverRide
void initState() {
super.initState();
_controller = InfiniteCardsController(
itemBuilder: _renderItem,
itemCount: 5,
animType: AnimType.SWITCH,
zIndexTransformCommon: _defaultCommonZIndexTransform,
zIndexTransformToBack: _defaultToFrontZIndexTransform,
zIndexTransformToFront: _defaultToFrontZIndexTransform,
);
}

void _defaultCommonZIndexTransform(CardItem card, double fraction, double curveFraction, double cardWidth, double cardHeight, int fromPosition, int toPosition) {
print(fraction.toString() + " " + cardWidth.toString() + " " + cardHeight.toString() + " " + fromPosition.toString() + " " + toPosition.toString() + " ");
card.zIndex = 1 + 0.01 * fromPosition + 0.01 * (toPosition - fromPosition) * fraction;
}

void _defaultToFrontZIndexTransform(CardItem card, double fraction, double curveFraction, double cardWidth, double cardHeight, int fromPosition, int toPosition) {
card.zIndex = 1;
print(fraction.toString() + " " + cardWidth.toString() + " " + cardHeight.toString() + " " + fromPosition.toString() + " " + toPosition.toString() + " ");
// if (fraction < 0.5) {
// card.zIndex = 1 + 0.01 * fromPosition;
// } else {
// card.zIndex = 1 + 0.01 * toPosition;
// }
}

Widget _renderItem(BuildContext context, int index) {
return Column(
children: [
Image(
image: AssetImage('assets/pic${index + 1}.png'),
),
Text(_index.toString()),
],
);
}

int _index = 0;

void _changeType(BuildContext context) {
if (_isTypeSwitch) {
_controller.reset(
itemCount: 4,
animType: AnimType.TO_FRONT,
transformToBack: _customToBackTransform,
);
} else {
_controller.reset(
itemCount: 5,
animType: AnimType.SWITCH,
transformToBack: DefaultToBackTransform,
);
}
_isTypeSwitch = !_isTypeSwitch;
}

@OverRide
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("InfiniteCards"),
),
body: Column(
children: [
InfiniteCards(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.width * 1.3,
controller: _controller,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
RaisedButton(
onPressed: () {
_controller.reset(animType: _isTypeSwitch ? AnimType.SWITCH : AnimType.TO_FRONT);
_controller.previous();
},
child: Text("Pre"),
),
RaisedButton(
onPressed: () {
setState(() {
_index++;
});
// _changeType(context);
},
child: Text("Update"),
),
RaisedButton(
onPressed: () {
_controller.reset(animType: AnimType.TO_END);
_controller.next();
},
child: Text("Next"),
),
],
),
],
),
);
}
}

Transform _customToBackTransform(Widget item, double fraction, double curveFraction, double cardHeight, double cardWidth, int fromPosition, int toPosition) {
int positionCount = fromPosition - toPosition;
double scale = (0.8 - 0.1 * fromPosition) + (0.1 * fraction * positionCount);
double rotateY;
double translationX;
if (fraction < 0.5) {
translationX = cardWidth * fraction * 1.5;
rotateY = math.pi / 2 * fraction;
} else {
translationX = cardWidth * 1.5 * (1 - fraction);
rotateY = math.pi / 2 * (1 - fraction);
}
double interpolatorScale = 0.8 - 0.1 * fromPosition + (0.1 * curveFraction * positionCount);
double translationY = -cardHeight * (0.8 - interpolatorScale) * 0.5 - cardHeight * (0.02 * fromPosition - 0.02 * curveFraction * positionCount);
return Transform.translate(
offset: Offset(translationX, translationY),
child: Transform.scale(
scale: scale,
child: Transform(
transform: Matrix4.identity()
..setEntry(3, 2, 0.002)
..rotateY(rotateY),
alignment: Alignment.center,
child: item,
),
),
);
}

尝试给item添加key