如何从 2 个嵌套的 PageViews 获取屏幕上主要项目的索引?
How to get the index of the main item on screen from 2 nested PageViews?
我嵌套了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',
)),
),
];```
我发现我可以将内部页面视图中的 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],
);
}
}
我嵌套了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',
)),
),
];```
我发现我可以将内部页面视图中的 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],
);
}
}