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

Question

我有嵌套的 pageview s，外层的页面是垂直的(可以上下滚动)，内部的页面视图是角(可以左转和右转)--在垂直浏览视图的每一行中，我都有水平页面视图。

根据这里的代码，我为外部页面视图获得了正确的索引，我称之为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',
    )),
  ),
];```

Answer 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],
    );
  }
}