在 Flutter 中的 PageView.builder 上查看索引号答案

【问题标题】：View Index numbers on PageView.builder in Flutter在 Flutter 中的 PageView.builder 上查看索引号
【发布时间】：2021-09-18 08:19:23
【问题描述】：

我正在开发一个使用 PageView 构建器的项目。我总共有 30 个项目数。在我想展示广告的每个页面之间。问题是，当我显示它时，它将从广告页面开始，然后转到第 1 页，然后再次转到广告页面，这次它跳过第 2 页并直接跳到第 3 页。如何按升序显示它们而不会丢失任何数字介于两者之间。

body: PageView.builder(
          controller: _pageController,
          itemCount: 30,
          itemBuilder: (BuildContext context, int index) {
            final workoutindex = immunityBoosterworkoutlist[index];
            if (index % 2 == 0) {
              return Container(
                child: Center(child: Text('Ads Page')),
              );
            } else {
              return Container(
                child: Center(child: Text('page $index')),
              );
            }
}

请参考： https://imgur.com/a/o8SjfXk

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

您目前正在获取这样的页面 Ad -> 1 Ad -> 3 -> Ad -> 5 -> Ad -> 7

查看这组代码。你会得到这样的页面 Ad -> 1 Ad -> 2 -> Ad -> 3 -> Ad -> 4 等等。希望这就是你想要的。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int number = 0;
  @override
  Widget build(BuildContext context) {
    PageController _pageController = PageController();
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PageView.builder(
        controller: _pageController,
        itemCount: 30,
        onPageChanged: (num) {

          // ============= main Login ==============

          setState(() {
            if (num % 2 != 0) {
              number += 1;
            }
          });


        },
        itemBuilder: (BuildContext context, int index) {
          if (index % 2 == 0) {
            return Container(
              child: Center(child: Text('Ads Page')),
            );
          } else {
            return Container(
              child: Center(child: Text('page ${index - number}')),
            );
          }
        },
      ),
    );
  }
}

【讨论】：