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

路线之间的颤振加载屏幕

1 个答案: