dart - 在 Flutter 中导航屏幕时丢失数据

问题描述

我是 Flutter 的新手，刚开始制作一个小应用程序，它使用async请求从服务器获取热门电影列表。当我点击每个列表项的顶部时，它会将我导航到另一个屏幕以显示有关电影的一些详细信息。

但是有一个问题，当我点击任何项目以查看它的详细信息时，在详细信息页面内，当我按下时back，在第一页中，它只是再次加载数据，这不是很好的用户体验。每个请求也会使用更多的电池和带宽。

我不知道这是 Flutter 在导航到另一个屏幕后丢失 Stateful 小部件数据的自然行为，还是我的代码有问题。

任何人都可以帮我解决这个问题

这是我的代码：

import "package:flutter/material.dart";
import "dart:async";
import "dart:convert";
import "package:http/http.dart" as http;

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

class MovieApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'test',
        home: Scaffold(
            appBar: AppBar(
                backgroundColor: Colors.white,
                title: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      Text("Top Movies List",
                          textDirection: TextDirection.rtl,
                          style: TextStyle(color: Colors.black87))
                    ]
                )
            ),
            body: MoviesList()
        )
    );
  }
}


class MoviesList extends StatefulWidget {
  @override
  MoviesListState createState() => new MoviesListState();
}

class MoviesListState extends State<MoviesList> {

  List moviesList = [];

  Future<Map> getData() async {
    http.Response response = await http.get(
        'http://api.themoviedb.org/3/discover/movie?api_key={api_key}'
    );
    setState(() {
        moviesList = json.decode(response.body)['results'];
    });
//    return json.decode(response.body);
  }

  @override
  Widget build(BuildContext context) {
    getData();
    if(moviesList == null) {
      return Scaffold(
        body: Text('Getting data from server')
      );
    } else {
      return ListView.builder(
          itemCount: moviesList.length,
          itemBuilder: (context, index){
            return Container(
                child: ListTile(
                    title: Text(moviesList[index]['title']),
                    onTap: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(builder: (context) => MovieDetails()),
                      );
                    }
                )
            );
          }
      );
    }
  }
}

class MovieDetails extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text('Details')
      ),
      body: Container(
          child: Center(
            child: RaisedButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text('Go back!'),
            ),
          )
      ),
    );
  }
}

标签： dartflutter

将您的getData()方法移动initState()到您的State班级中。（从构建方法中删除它）

@override
 void initState() {
   getData();
   super.initState();
}

dart - 在 Flutter 中导航屏幕时丢失数据

问题描述

解决方案

推荐阅读