如何从 2 个嵌套的 PageViews 中获取屏幕上主要项目的索引？答案

【问题标题】：How to get the index of the main item on screen from 2 nested PageViews?如何从 2 个嵌套的 PageViews 中获取屏幕上主要项目的索引？
【发布时间】：2021-06-25 11:10:07
【问题描述】：

我有嵌套PageView，外层是vertical（可以上下滚动），内层是horisontal（可以左右走） - 在垂直滚动视图的每一行中，我都有水平页面浏览量。

根据此处的代码，我得到了外部网页浏览的正确索引，我称之为rowIndx，但内部网页浏览的索引错误。例如，当我在 rowIndx = 0 和 columnIndx = 2 上时，我看到控制台中打印了正确的数字，当我向下滚动时，我得到 rowIndx = 1 和 columnIndx = 2 而不是 rowIndx = 1 和 columnIndx = 0。

仅当您在每一行中至少向右或向左滚动一次时，列的索引才会更新。如何在任何卡上立即获得正确的索引？

您可以通过点击每张卡片在控制台中打印索引。每张卡片上的文字显示columnIndx 的正确数字，以便与控制台中打印的内容进行比较。

提前感谢您的帮助。

void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget {

  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  int rowIndx = 0;
  int columnIndx = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView.builder(
          onPageChanged: (index) {
            rowIndx = index;
          },
          scrollDirection: Axis.vertical,
          controller: PageController(initialPage: 0, viewportFraction: 0.63),
          itemCount: 5,
          itemBuilder: (_, index) {
            return PageView.builder(
                onPageChanged: (index) {
                  columnIndx = index;
                },
                controller:
                    PageController(initialPage: 0, viewportFraction: 0.63),
                itemCount: sampleCard.length,
                itemBuilder: (context, ind) {
                  return GestureDetector(
                    onTap: () {
                      print(
                          'column : $columnIndx   in horizontal scroll > left and right');
                      print(
                          'row : $rowIndx   in vertical scroll > up and down');
                    },
                    child: sampleCard[ind],
                  );
                });
          }),
    );
  }
}
List sampleCard = [
  Container(
    margin: EdgeInsets.all(50.0),
    decoration: BoxDecoration(
      color: Colors.red,
    ),
    child: Center(
        child: Text(
      'column 0',
    )),
  ),
  Container(
    margin: EdgeInsets.all(50.0),
    decoration: BoxDecoration(
      color: Colors.blueGrey,
    ),
    child: Center(
        child: Text(
      'column 1',
    )),
  ),
  Container(
    margin: EdgeInsets.all(50.0),
    decoration: BoxDecoration(
      color: Colors.yellow,
    ),
    child: Center(
        child: Text(
      'column 2',
    )),
  ),
];```

【问题讨论】：

标签： flutter dart pageviews flutter-pageview

【解决方案1】：

我发现我可以将内部页面视图中的返回小部件分离成一个无状态小部件，并从该小部件中获取列和行，如下所示：

class MyHomePage extends StatefulWidget {

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int rowIndx = 0;
  int columnIndx = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView.builder(
          onPageChanged: (index) {
            rowIndx = index;
          },
          scrollDirection: Axis.vertical,
          controller: PageController(initialPage: 0, viewportFraction: 0.63),
          itemCount: 5,
          itemBuilder: (_, index) {
            return PageView.builder(
                onPageChanged: (index) {
                  columnIndx = index;
                },
                controller:
                    PageController(initialPage: 0, viewportFraction: 0.63),
                itemCount: sampleCard.length,
                itemBuilder: (context, ind) {
                  return _Cards(
                    column: ind,
                    row: index,
                  );
                });
          }),
    );
  }
}

class _Cards extends StatelessWidget {
  final int column;
  final int row;

  const _Cards({Key? key, required this.column, required this.row})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        print('column : $column   in horizontal scroll > left and right');
        print('row : $row   in vertical scroll > up and down');
      },
      child: sampleCard[column],
    );
  }
}

【讨论】：