如何在 Flutter 中将滚动视图转换为 ListView？

Question

我有一个堆栈中几张卡片的滚动视图。滚动选择的卡消失。我想保留这张卡片和后续卡片，并将它们全部显示在 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: '1234',
        company: Text(
          'AMERICAN \nEXPRESS',
          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: '2434',
        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: '4567',
        company: Text(
          'AMERICAN \nEXPRESS',
          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,
    );
  }
}

Answer 1

你的 listView 必须有一定的尺寸，否则它会扩散到全屏。你可以把它放在指定高度的 Container 上或使用 Expanded 小部件。