Question

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

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

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

有人可以帮我吗

这是我的代码：

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

Answer 1

在getData()类的initState()内部移动State方法。（将其从构建方法中删除）

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

在Flutter中浏览屏幕时丢失数据

1 个答案: