在Flutter PageView中切换页面时丢失小部件状态

2 回答

• 6

  keepPage: true 是默认行为;这意味着 PageController 会记住它所需要的页面's on if it is destroyed and recreated. This isn't .

  而是将页面特定的PageStorageKey传递给页面的构造函数 . 这有助于Flutter为您的页面提供独特的存储桶 . 然后在你希望恢复到之前条件的 State 中，你可以使用 PageStorage.of(context) 获取存储桶，当它们发生变化时，你可以将 initState 和 write 值中的值视为 read . 你可以在ExpansionTile中看到一个例子 .

  回复于 2024-04-30T14:11:09+08:00
• 3

  与AutomaticKeepAliveClientMixin一起使用到您的SubPage .

  然后@override bool得到wantKeepAlive => true;这是一个样本

  import 'package:flutter/material.dart';
  
  void main() => runApp(new MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return new MaterialApp(
        title: 'Flutter Demo',
        theme: new ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: new MyHomePage(title: 'Flutter Demo Home Page'),
      );
    }
  }
  
  class MyHomePage extends StatefulWidget {
    MyHomePage({Key key, this.title}) : super(key: key);
  
    final String title;
  
    @override
    _MyHomePageState createState() => new _MyHomePageState();
  }
  
  class _MyHomePageState extends State<MyHomePage> {
    @override
    Widget build(BuildContext context) {
      return DefaultTabController(
        length: 4,
        child: new Scaffold(
          appBar: new AppBar(
            bottom: new TabBar(
              tabs: [
                new Tab(icon: new Icon(Icons.directions_car)),
                new Tab(icon: new Icon(Icons.directions_transit)),
                new Tab(icon: new Icon(Icons.directions_bike)),
                new Tab(
                  icon: new Icon(Icons.airplanemode_active),
                )
              ],
            ),
          ),
          body: new TabBarView(children: [
            new OnePage(color: Colors.black,),
            new OnePage(color: Colors.green,),
            new OnePage(color: Colors.red,),
            new OnePage(color: Colors.blue,),
          ]),
        ),
      );
    }
  }
  
  class OnePage extends StatefulWidget {
    final Color color;
  
    const OnePage({Key key, this.color}) : super(key: key);
  
    @override
    _OnePageState createState() => new _OnePageState();
  }
  
  class _OnePageState extends State<OnePage> with AutomaticKeepAliveClientMixin<OnePage> {
    @override
    Widget build(BuildContext context) {
      super.build(context);
      return new SizedBox.expand(
        child: new ListView.builder(
          itemCount: 100,
          itemBuilder: (context, index) {
            return new Padding(
              padding: const EdgeInsets.all(10.0),
              child: new Text(
                '$index',
                style: new TextStyle(color: widget.color),
              ),
            );
          },
        ),
      );
    }
  
    @override
    bool get wantKeepAlive => true;
  }
  

  回复于 2024-04-30T14:11:09+08:00