路由之间的颤振加载屏幕

Question

我有一个 Flutter 应用，它有一个主页和一个文章页面。 主页显示多篇文章，您可以单击并显示该文章的文章页面。当导航到文章页面时，我在文章页面的 initState 中使用调用来加载插页式广告。 我正在使用命名路由在页面之间导航。

我想要实现的是，当用户点击主页上的一篇文章时，他会在后台导航到文章页面，同时全屏覆盖加载动画。文章页面应在后台打开，以便在客户端看到之前使用服务器图像和文本呈现。 叠加层出现后，我将调用插页式函数。如果有插页式广告，它将出现在应用程序的顶部，覆盖层将被移除，当用户关闭插页式广告时，他将看到预加载内容的文章页面。 如果没有插页式广告，X 秒后覆盖将被移除，用户将再次看到预加载的文章页面。

谁能帮我实现这个目标？

谢谢！

Answer 1

您问的是一个非常笼统的状态管理问题。我将提供一个使用布尔值和setState() 来指示加载状态的答案。这是处理状态的最原始方式。一旦你有更多的状态/页面，它会变得更加混乱。您应该阅读here 中的更多文章并选择状态管理解决方案。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: ScreenHome(),
    );
  }
}

class ScreenHome extends StatefulWidget {
  @override
  _ScreenHomeState createState() => _ScreenHomeState();
}

class _ScreenHomeState extends State<ScreenHome> {
  List<int>   _ids = [3,75,776,23];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ListView.builder(
          itemCount: _ids.length,
          itemBuilder: (_, index) {
            return GestureDetector(
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => ArticlePage(_ids[index])),
                );
              },
              child: Padding(
                padding: const EdgeInsets.all(12.0),
                child: Text(_ids[index].toString()),
              ),
            );
          },
        ),
      ),
    );
  }
}

class ArticlePage extends StatefulWidget {
  final int articleId;

  const ArticlePage(this.articleId, {Key key}) : super(key: key);

  @override
  _ArticlePageState createState() => _ArticlePageState();
}

class _ArticlePageState extends State<ArticlePage> {
  bool _loading = true;

  @override
  void initState() {
    super.initState();
    Future.delayed(Duration(seconds: 1), () {
      setState(() {
        _loading = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child:
            _loading ? CircularProgressIndicator() : Text("Article id: ${widget.articleId}"),
      ),
    );
  }
}