如何在 Flutter 應用程序中顯示 WordPress 帖子？

Question

我正在嘗試在我的 Flutter 應用程序中實現一個簡單的討論板。 為此，我想將 WordPress 博客站點連接到該應用程序。 我按照本教程進行了稍微編輯以獲取我的代碼：

import 'package:flutter/material.dart';
import 'package:flutter_wordpress/flutter_wordpress.dart' as wp;
import 'package:flutter_html/flutter_html.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:azingg_starter/MomTalk_Home/wp_details.dart';

class LandingPage extends StatelessWidget {
  wp.WordPress wordPress = wp.WordPress(
    baseUrl: 'https://example.com/',
  );

  _fetchPosts() {
    Future<List<wp.Post>> posts = wordPress.fetchPosts(
        postParams: wp.ParamsPostList(
          context: wp.WordPressContext.view,
          pageNum: 1,
          perPage: 10,
        ),
        fetchAuthor: true,
        fetchFeaturedMedia: true,
        fetchComments: true);
    if (posts == null) {
      return posts;
    }
  }

  _getPostImage(wp.Post post) {
    if (post.featuredMedia == null) {
      return SizedBox();
    }
    return Image.network(post.featuredMedia.sourceUrl);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MomTalk'),
        centerTitle: true,
      ),
      body: Container(
        child: FutureBuilder(
          future: _fetchPosts(),
          builder:
              (BuildContext context, AsyncSnapshot<List<wp.Post>> snapshot) {
            if (snapshot.connectionState == ConnectionState.none) {
              return Container();
            }
            if (snapshot.connectionState == ConnectionState.waiting) {
              return Center(
                child: CircularProgressIndicator(),
              );
            }
            return ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (context, index) {
                wp.Post post = snapshot.data[index];
                return InkWell(
                  onTap: () {
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => DetailsPage(post)));
                  },
                  child: Padding(
                    padding: const EdgeInsets.all(5.0),
                    child: Card(
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Column(
                          children: <Widget>[
                            _getPostImage(post),
                            SizedBox(
                              height: 10,
                            ),
                            Text(
                              post.title.rendered.toString(),
                              style: TextStyle(
                                  fontWeight: FontWeight.bold, fontSize: 20),
                            ),
                            SizedBox(
                              height: 15,
                            ),
                            Html(
                              data: post.excerpt.rendered.toString(),
                              onLinkTap: (String link) {
                                _launchUrl(link);
                              },
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                Text(post.date.toString().replaceAll('T', ' ')),
                                Text(post.author.name),
                              ],
                            )
                          ],
                        ),
                      ),
                    ),
                  ),
                );
              },
            );
          },
        ),
      ),
    );
  }
}

_launchUrl(String link) async {
  if (await canLaunch(link)) {
    await launch(link);
  } else {
    throw 'Cannot launch $link';
  }
}

以前，我收到一個關於“getter 'length' is called on null”的錯誤，所以我添加了“if (posts == null)”代碼行來解決這個問題。 但是，現在我看到一個空白屏幕（即使我的網站上有帖子）。 關於為什么它似乎認為我的網站上沒有帖子，或者為什么沒有收到帖子的任何想法？

Answer 1

您對_fetchPosts使用有很多問題。

首先，使其async 。 這將使在其中等待期貨變得更加直觀。

其次，等待wordPress.fetchPosts 。 現在你直接調用它只會返回一個期貨列表，你不能直接使用期貨來填充你的頁面。

第三，你在這段代碼中有一個錯字：

if (posts == null) {
  return posts;
}

這意味着你只在它為空時返回posts 。 當posts不為null 時，該函數不會返回任何內容，而在Dart 中，如果函數沒有返回任何其他內容，則它們將始終返回null。 因此，此函數將始終返回 null。 因此，您可以將==更改為!= ，但這會引入冗余，因為您只會在posts不為空時返回posts ，但該函數無論如何都會返回空。 因此，您可以完全取消 if 檢查。 （這是假設您沒有使用空安全，您的代碼會建議您沒有。）

考慮到這些因素，完整的函數應該是這樣的：

Future<List<wp.Post>> _fetchPosts() async {
  List<wp.Post> posts = await wordPress.fetchPosts(
    postParams: wp.ParamsPostList(
      context: wp.WordPressContext.view,
      pageNum: 1,
      perPage: 10,
    ),
    fetchAuthor: true,
    fetchFeaturedMedia: true,
    fetchComments: true,
  );

  return posts;
}