如何在颤动上无限循环数组

Question

我想问一下我的问题，我想在数组的最后一个索引上堆叠卡时用无限循环制作一堆卡，我想让它循环到第一个索引。我使用 satck 小部件和页面构建器，我有一个数据列表：

import 'package:flutter/material.dart';

List<String> images = [
  'assets/images/trivia/bedroom.png',
  'assets/images/trivia/digital-signature.png',
];

List<String> title = [
  '“41 percent of job seekers search for jobs while in bed”',
  '“Digital signatures are legally recognized.”',
];

List<Color> colorList = [
  Color(0xffa605ad),
  Color(0xffe0991e),
];

还有我的颤振代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'data.dart';
import 'dart:math';

void main() => runApp(MaterialApp(
      home: Trivia(),
      debugShowCheckedModeBanner: false,
    ));

class Trivia extends StatefulWidget {
  @override
  _TriviaState createState() => new _TriviaState();
}

var cardAspectRatio = 12.0 / 16.0;
var widgetAspectRatio = cardAspectRatio * 1.2;

class _TriviaState extends State<Trivia> {
  var currentPage = images.length - 1.0;

  @override
  Widget build(BuildContext context) {
    PageController controller = PageController(initialPage: images.length - 1);

    controller.addListener(() {
      setState(() {
        currentPage = controller.page;
      });
    });

    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
      ),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        body: Column(
          children: <Widget>[
            SizedBox(
              height: 70,
            ),
            Container(
              alignment: Alignment.center,
              child: Text(
                'Please Wait',
                textAlign: TextAlign.center,
              ),
            ),

            SizedBox(
              height: 60,
            ),
            Stack(
              children: <Widget>[
                CardScrollWidget(currentPage),
                Positioned.fill(
                  child: PageView.builder(
                    itemCount: images.length,
                    controller: controller,
                    reverse: true,
                    itemBuilder: (context, index) {
                      return Container();
                    },
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class CardScrollWidget extends StatelessWidget {
  double currentPage;
  var padding = 20.0;
  var verticalInset = 20.0;

  CardScrollWidget(this.currentPage);

  @override
  Widget build(BuildContext context) {
    return new AspectRatio(
      aspectRatio: widgetAspectRatio,
      child: LayoutBuilder(builder: (context, contraints) {
        var width = contraints.maxWidth;
        var height = contraints.maxHeight;

        var safeWidth = width - 2 * padding;
        var safeHeight = height - 2 * padding;

        var heightOfPrimaryCard = safeHeight;
        var widthOfPrimaryCard = heightOfPrimaryCard * cardAspectRatio;

        var primaryCardLeft = safeWidth - widthOfPrimaryCard;
        var horizontalInset = primaryCardLeft / 2;

        List<Widget> cardList = new List();

        for (var 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: ClipRRect(
              child: Container(
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(16.0),
                    border: Border.all(color: colorList[i], width: 2)),
                child: AspectRatio(
                  aspectRatio: cardAspectRatio,
                  child: Stack(
                    fit: StackFit.expand,
                    children: <Widget>[
                      Text(
                        'Fun Fact',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            decorationColor: Colors.black,
                            fontSize: 22,
                            fontFamily: 'Poppins-ExtraBold'),
                      ),
                      Image.asset(
                        images[i],
                        scale: 3,
                      ),
                      Align(
                        alignment: Alignment.bottomLeft,
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: <Widget>[
                            Padding(
                              padding: EdgeInsets.symmetric(
                                  horizontal: 16.0, vertical: 8.0),
                              child: Text(title[i],
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                      color: colorList[i],
                                      fontSize: 18.0,
                                      fontFamily: 'TTCommons')),
                            ),
                            SizedBox(
                              height: 10.0,
                            ),
                          ],
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ),
          );
          cardList.add(cardItem);
        }
        return Stack(
          children: cardList,
        );
      }),
    );
  }
}

我想让卡片按数组循环。还是谢谢你

Answer 1

您可以使用 PageView 执行此操作，默认为循环，除非您为 PageView 提供项目计数。示例

final controller = new PageController(initialPage: 999);
 ...

new PageView.builder(
      controller: controller,
      itemBuilder: (context, index) {
        return new Center(
          child: new Text('${index % 5}'),
        );
      },
)

我不知道您是否需要确切的堆栈并且不能使用 PageView.. 但如果您不能使用 PageView，我会尝试为您搜索答案。

希望对你有所帮助！