Как преобразовать вид с прокруткой в ​​ListView во Flutter?

У меня есть прокрутка нескольких карт в стопке. При прокрутке выбранная карта исчезает. Я хочу сохранить эту карту и последующую карту, чтобы все они отображались в ListView и не исчезали. Я видел, как эта функция реализована в этом хранилище, и это выглядит так:

введите описание изображения здесь Однако это показывает мне только одну карту за раз. Я хочу добиться перехода карт в список после удаления из стека. Поэтому я попытался реализовать это, и это сработало, но я не смог достичь стека ниже. Это код для моей реализации:

class _HomePageState extends State<HomePage> {
  final _pageController = PageController(
    viewportFraction: 0.3,
  );

  List<CreditCard> _creditCards = [];

  @override
  void initState() {
    super.initState();

    _creditCards = [
      CreditCard(
        decoration: BoxDecoration(
          color: Colors.black.withOpacity(0.6),
        ),
        image: 'images/visa.png',
        name: 'ANDREW MITCHELL',
        number: 񟡂',
        company: Text(
          'AMERICAN 
EXPRESS',
          textAlign: TextAlign.right,
          style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.w800,
            fontSize: 16,
          ),
        ),
      ),
      CreditCard(
        decoration: BoxDecoration(
          color: kRed.withOpacity(0.4),
        ),
        image: 'images/visa.png',
        name: 'ANDREW MITCHELL',
        number: 񟳲',
        company: Image.asset(
          'images/virgin.png',
          height: 50,
        ),
      ),
      CreditCard(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.centerLeft,
            end: Alignment.centerRight,
            colors: [kBlue, kPurple],
            stops: [0.3, 0.95],
          ),
        ),
        image: 'images/mastercard.png',
        name: 'ANDREW MITCHELL',
        number: 񠕇',
        company: Text(
          'AMERICAN 
EXPRESS',
          textAlign: TextAlign.right,
          style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.w800,
            fontSize: 16,
          ),
        ),
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: PageView.builder(
          controller: _pageController,
          scrollDirection: Axis.vertical,
          itemCount: _creditCards.length,
          itemBuilder: (context, index) => _builder(index),
        ),
      ),
    );
  }

  _builder(int index) {
    CreditCard _card = _creditCards[index];
    return AnimatedBuilder(
      animation: _pageController,
      builder: (context, child) {
        double value = 1.6;

        if (_pageController.position.haveDimensions) {
          value = _pageController.page - index;

          if (value >= 0) {
            double _lowerLimit = 0+1.55;
            double _upperLimit = pi / 2;

            value = (_upperLimit - (value.abs() * (_upperLimit - _lowerLimit)))
                .clamp(_lowerLimit, _upperLimit);
            value = _upperLimit - value;
            value *= -1;
          }
        } else {
          if (index == 0) {
            value = 0;
          } else if (index == 1) {
            value = -1;
          }
        }

        return Center(
          child: Transform(
            transform: Matrix4.identity()
              ..setEntry(3, 2, 0.001)
              ..rotateX(value),
            alignment: Alignment.center,
            child: child,
          ),
        );
      },
      child: _card,
    );
  }
}

введите описание изображения здесь

Всего 1 ответ


Ваш listView должен быть определенного размера. В противном случае он распространяется на весь экран. Вы можете поместить его в контейнер указанной высоты или использовать расширенный виджет.


Есть идеи?

10000