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

标签 dart flutter

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

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

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

谁能帮我解决这个问题

enter image description here

这是我的代码:

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

最佳答案

getData() 方法移到 State 类的 initState() 中。 (从构建方法中删除它)

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

关于dart - 在 Flutter 中导航屏幕时丢失数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53621571/

相关文章:

dart - Dart SDK在Raspberry Pi上构建失败

android - Flutter 医生在 Mac 上显示演示应用程序的 sdkmanager 错误

flutter - 添加Braintree插件会中断Flutter上的社交登录

flutter - 如何创建一个TextField来更改用户输入的字体和颜色?

string - 错误 'A value of type ' dynamic' 无法分配给 'String' 类型的变量。在 Dart 2.2

dart - 如何在新选项卡或同一选项卡中打开 flutter web 中的外部 url

flutter - SingleChildScrollView/Column 内的 ReorderableListView

dart - 在不推送新 View 的情况下更新脚手架内容(appBar 标题和正文)?

dart - 如何在 Flutter 中链接文本

flutter - 在 Flutter 中抛出异常的最佳实践是什么