flutter - 如何防止重建 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 只显示过一次，首页.build 和 SecondPage.build 每一页都印上了变化。

我想防止不必要的页面绘制，我怎样才能做到这一点？

Answer 1

您可以通过使用来实现
1. const关键词

让您的小部件接受 const :
class 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在 StatefullWidget已创建 State .

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

覆盖 wantKeepAlive setter/getter 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还是一样。