如何防止重建 PageView 的 StatelessWidget 子级

Question

我创建了简单的 PageView 应用程序来测试多个页面。

import 'package:flutter/material.dart';

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(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    final firstPage = FirstPage(key: Key("FirstPage"));
    final secondPage = SecondPage(key: Key("SecondPage"));

    debugPrint("_MyHomePageState.build");
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: PageView(
        children: <Widget>[
          firstPage,
          secondPage,
        ],
      ),
    );
  }
}

class FirstPage extends StatelessWidget {
  FirstPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    debugPrint("FirstPage.build");
    return Container(
      child: Center(
        child: Text("First Page"),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  SecondPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    debugPrint("SecondPage.build");
    return Container(
      child: Center(
        child: Text("Second Page"),
      ),
    );
  }
}

即使认为_MyHomePageState.build只显示一次，FirstPage.build和SecondPage.build也会在每次页面更改时打印。

我想防止不必要的页面绘制，我该如何实现？

Answer 1

您可以通过使用来实现

1、const关键词

• 让您的小部件接受const：

  类 FirstPage 扩展 StatelessWidget { const FirstPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    debugPrint("FirstPage.build");
    return Container(
      child: Center(
        child: Text("First Page"),
      ),
    );
  }
  

  }

• 并用const关键字调用它：

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: PageView(
        children: <Widget>[
          const firstPage(),
          const secondPage(),
        ],
      ),
    );
  

2.AutomaticKeepAliveClientMixin

• 将您的转换StatelessWidget为StatefullWidget.

class FirstPage extends StatefulWidget {
  FirstPage({Key key}) : super(key: key);

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

class _FirstPageState extends State<FirstPage> {
  @override
  Widget build(BuildContext context) {
    debugPrint("FirstPage.build");
    return Container(
      child: Center(
        child: Text("First Page"),
      ),
    );
  }
}

• 扩展创建AutomaticKeepAliveClientMixin的.StatefullWidgetState

class _FirstPageState extends State<FirstPage> with AutomaticKeepAliveClientMixin {

• 调用super该build方法。

@override
  Widget build(BuildContext context) {
    super.build(context);
    debugPrint("FirstPage.build");
    return Container(
      child: Center(
        child: Text("First Page"),
      ),
    );
  }

• 用返回值覆盖wantKeepAlivegetter true。

  @override
  bool get wantKeepAlive => true;

然后你的小部件树不会处理这个小部件，因此它不会一遍又一遍地重建。

代码示例：

class FirstPage extends StatefulWidget {
  FirstPage({Key key}) : super(key: key);

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

class _FirstPageState extends State<FirstPage>
    with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    debugPrint("FirstPage.build");
    return Container(
      child: Center(
        child: Text("First Page"),
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

3.使用您喜欢的MVVM任何解决方案进行架构State-management

它会将您的状态保存在ViewModel远离 的地方View，因此您的 UI 可以随时重建自己，而不必担心您的情况State，因为它ViewModel仍然是相同的。

Answer 2

这很容易！

pageController可以帮你。

就在你的_MyHomePageState

宣布final pageController = PageController(keepPage: false);

而在你的PageView

PageView(
        controller: pageController,
        children: <Widget>[
          firstPage,
          secondPage,
        ],
      )

祝你好运。