我如何使博客在TabBarView中工作？

Question

我正在尝试从Wordpress网站获取使用REST API的博客，以在TabBarView中显示我不确定如何去做。首先，我尝试了Widget blogSection = WordpressBlog(posts: posts);，但是却遇到了错误：“只能在初始化程序中访问静态成员” ...因此我将代码放置在void initState(){...}中，共有3个标签：infoSection，blogSection和contactSection。其中两个选项卡经过硬编码，可以正常工作。另外，我已经将博客提取到wordpress_blog.dart并命名为：WordpressBlog这在我的其他博客页面上也能很好地工作。这是完整的代码：

import 'package:cmfiflutterapp/components/wordpress_blog.dart';
import 'package:flutter/rendering.dart';
import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http;

void main() {
  runApp(MaterialApp(home: GlobalCompassion()));
}

class GlobalCompassion extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => GlobalCompassionState();
}

class GlobalCompassionState extends State {
  // Base URL for our wordpress API
  final String apiUrl = "https://cmf.international/wp-json/wp/v2/";

  // Empty list for our posts
  List posts;

  // Function to fetch list of posts
  Future<String> getPosts() async {
    var res = await http.get(Uri.encodeFull(apiUrl + "posts?_embed"),
        headers: {"Accept": "application/json"});

    // fill our posts list with results and update state
    setState(() {
      var resBody = json.decode(res.body);
      posts = resBody;
    });

    return "Success!";
  }

  @override
  void initState() {
    super.initState( );
    this.getPosts( );
    blogSection = Column(
      children: <Widget>[
        WordpressBlog(posts: posts)
      ],
      );
  }

  Widget infoSection = SingleChildScrollView(
    padding: EdgeInsets.all(14.0),
    child: Column(
      children: <Widget>[
        Text(
          ...
          ),
        ),
        SizedBox(
          height: 20,
        ),
        Image.asset('assets/images/glocompassion.png'),
        SizedBox(
          height: 20,
        ),
        Text(
          ...
        ),
      ],
    ),
  );

  Widget blogSection;

  Widget contactSection = SingleChildScrollView(
    padding: EdgeInsets.all(14.0),
    child: Center(
      child: Text(
          ...
    ),
  );


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DefaultTabController(
        length: 3,
        child: NestedScrollView(
            headerSliverBuilder:
                (BuildContext context, bool innerBoxIsScrolled) {
              return <Widget>[
                SliverAppBar(
                  expandedHeight: 200,
                  floating: false,
                  pinned: true,
                  flexibleSpace: FlexibleSpaceBar(
                    centerTitle: true,
                    title: Text('GlobalCompassion'),
                    background: Image.asset(
                      'assets/images/gcompassion.jpg',
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                SliverPadding(
                  padding: EdgeInsets.all(16.0),
                  sliver: SliverList(
                    delegate: SliverChildListDelegate([
                      TabBar(
                          labelColor: Colors.blue,
                          unselectedLabelColor: Colors.grey,
                          tabs: [
                            Tab(icon: Icon(Icons.info), text: 'About Us'),
                            Tab(icon: Icon(Icons.create), text: 'Blog'),
                            Tab(icon: Icon(Icons.contact_mail), text: 'Contact')
                          ])
                    ]),
                  ),
                )
              ];
            },
            body: Container(
              height: 200.0,
              child: TabBarView(
                children: <Widget>[infoSection, blogSection, contactSection],
              ),
            )),
      ),
    );
  }
}

非常感谢您的任何帮助，谢谢！

Answer 1

最终解决了这个问题。我必须改变的三件事。

首先是将我的List设为静态...因此，将以下内容从List posts;更改为：static List posts;

其次是从initState中删除不必要的代码，因此从此：

@override
  void initState() {
    super.initState( );
    this.getPosts( );
    blogSection = Column(
      children: <Widget>[
        WordpressBlog(posts: posts)
      ],
      );
  } 

至此：

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

第三次是将Scaffold添加到blogSection，如下所示：

 Widget blogSection = Scaffold(
       body: WordpressBlog(posts: posts)
    )

做到了。现在，在选项卡中有一个工作的Wordpress REST API博客。谢谢大家！