Флаттер - Как я могу предотвратить повторную инициализацию переменных при изменении состояния?

Question

У меня есть TabBarView с дочерними объектами с состоянием, и каждый раз, когда вкладка изменяется, дочерний виджет повторно инициализируется, и все его переменные сбрасываются.

Дочерний элемент - это в основном пользовательский виджет, который использует Future для загрузки данных из запроса HTTP . Когда это будет сделано, я бы хотел кешировать ответ, поэтому, когда пользователь возвращается на вкладку, ему не нужно снова загружать данные через HTTP . Однако если я сохраню данные HTTP в виджете с отслеживанием состояния, он будет повторно инициализирован до нуля (и поэтому мне придется загружать его снова) при изменении вкладки.

Как я могу предотвратить повторную инициализацию флаттера моего виджета содержимого вкладки?

Answer 1

Можете ли вы создать Future, который загружает данные из HTTP на родительском уровне (один уровень до TabBarView) и отправляет их на TabBarView. Таким образом, не будет загружаться при каждом изменении вкладки.

Пример малого кода:

import 'dart:async';

import 'package:flutter/material.dart';

void main() {
  runApp(TabBarDemo());
}

class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Future<int> data = dataFromNetwork();
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
              ],
            ),
            title: Text('Tabs Demo'),
          ),
          body: TabBarView(
            children: [
              new Page(data), // I am sending the same data for example purpose
              new Page(data),
            ],
          ),
        ),
      ),
    );
  }

  Future<int> dataFromNetwork() {
    return Future.delayed(Duration(seconds: 5), () {return 1;});
  }

}

class Page extends StatefulWidget {
  final Future<int> data;

  Page(this.data);

  @override
  State<StatefulWidget> createState() {
    return PageState(data);
  }
}

class PageState extends State<Page> {
  Future<int> data;

  PageState(this.data);

  @override
  Widget build(BuildContext context) {
    data.then((value) {
      print(value);
    });
    return Text("hi");
  }

}