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

Question

我嵌套了PageViews，外面的是vertical（可以上下滚动），里面的pageview是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',
    )),
  ),
];```

Answer 1

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

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

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

How to get the index of the main item on screen from 2 nested PageViews?

pageviews

dart

flutter

flutter-pageview