如何在flutter中处理/终止PageView中的页面

Question

我有一个包含两个页面的PageView，两个页面都有一个自定义的导航器堆栈。

在最初的开始(假设我在第1页打星号(，第2页是在我开始滚动或跳转到它时构建的(正常(。

我想，当我在第2页上并返回第1页时，反之亦然，这些页面仍然有效，我想处理/杀死它们以强制重建。。至少在第2页。

我试过wantKeepAlive = false，但不起作用。

有人能分享实现这一目标的方法吗。

Answer 1

滑动重建

如果目标是告诉我们的小部件在页面来回滑动时重建，我们可以使用PageView.builder的onPageChanged回调¹

onPageChanged:将在每次查看页面时运行我们给它的函数。

将onPageChanged链接到重建页面

onPageChanged和PageView中的页面重建之间没有内置的连接。

onPageChanged只是运行我们给它的任何任意函数，仅此而已。

如果我们希望用onPageChanged重建页面，我们需要自己创建链接。

与ValueNotifier/ValueListenableBuilder链接

在本例中，我们使用ValueNotifier(buildCount变量(通知ValueListenableBuilder在buildCount发生更改时进行重建。(有关信息，请参阅Flutter文档。(

每次我们滑动页面时，buildCount将增加，页面中的ValueListenableBuilder将重建，显示新的总数：

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
class PageViewRebuildPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('PageView Stream Rebuild'),
),
body: PageViewRebuildExample()
);
}
}
class PageViewRebuildExample extends StatelessWidget {
final List<String> contents = ['One', 'Two', 'Three'];
final ValueNotifier<int> buildCount = ValueNotifier<int>(0);
@override
Widget build(BuildContext context) {
print('Example built');
return Center(
child: PageView.builder(
itemCount: contents.length,
onPageChanged: (page) {
print('PageChanged $page');
buildCount.value++;
},
itemBuilder: (context, index) {
return Container(
alignment: Alignment.center,
margin: EdgeInsets.symmetric(vertical: 40, horizontal: 20),
color: Colors.lightBlueAccent,
child: ValueListenableBuilder(
valueListenable: buildCount,
// bldCnt here ↓↓ is buildCount.value
builder: (context, bldCnt, child) =>
// ↓ YOUR STUFF GOES HERE ↓
Text('Page ${contents[index]} : $bldCnt',
style: TextStyle(fontSize: 30)),
),
);
},
),
);
}
}

为了适应您的目的，您需要用Widget替换ValueListenableBuilder的builder:部分。它将在每次滑动时重建。

---

附录

如果您想知道滑动手势过程中页面的精确位置，我们可以提供PageController到PageView，将监听器连接到该控制器，并监听controller.page输出：

class PageViewRebuildExample extends StatefulWidget {
@override
_PageViewRebuildExampleState createState() => _PageViewRebuildExampleState();
}
// Switched to StatefulWidget so we can add listener & dispose
class _PageViewRebuildExampleState extends State<PageViewRebuildExample> {
final List<String> contents = ['One', 'Two', 'Three'];
final ValueNotifier<int> buildCount = ValueNotifier<int>(0);
final PageController controller = PageController(); // ← our new controller
@override
void initState() {
super.initState();
controller.addListener(() { // ← add a listener in onInit
print('Precise page position ${controller.page}');
});
}

@override
void dispose() {
controller.dispose(); // don't forget to dispose
super.dispose();
}
@override
Widget build(BuildContext context) {
print('Example built');
return Center(
child: PageView.builder(
itemCount: contents.length,
controller: controller, // ← PageController provided here
onPageChanged: (page) {
print('PageChanged $page');
buildCount.value++;
},

我们上面的示例监听器的输出是(剪切以缩短(：

I/flutter (14528): Precise page position 0.001861572265625
I/flutter (14528): Precise page position 0.006500244140625
I/flutter (14528): Precise page position 0.01019287109375
I/flutter (14528): Precise page position 0.012054443359375
... <snip>
I/flutter (14528): Precise page position 0.45981356897799835
I/flutter (14528): Precise page position 0.5179874247450384
I/flutter (14528): PageChanged 1
I/flutter (14528): Precise page position 0.5743095749455654
I/flutter (14528): Precise page position 0.6269737660740682
... <snip>
I/flutter (14528): Precise page position 0.9986377335325707
I/flutter (14528): Precise page position 0.9988375372072605
I/flutter (14528): Precise page position 0.9990080727700607
I/flutter (14528): Precise page position 1.0

---

¹可能还有很多其他方法可以做到这一点，这只是一种方法。例如，使用Stream将事件从onPageChanged发送到itemBuilder内的StreamBuilder是另一种。