Dart 如何将水平卡片转盘视图添加到颤振应用程序

您好，我正在使用Flatter制作instagram克隆，对于订阅源，我希望图像显示在水平卡片传送带视图中，以显示您关注的用户的帖子

以下是当前提要代码：

import 'package:flutter/material.dart';
import 'image_post.dart';
import 'dart:async';
import 'package:async/async.dart';
import 'main.dart';
import 'dart:io';
import 'dart:convert';
import 'package:shared_preferences/shared_preferences.dart';

class Feed extends StatefulWidget {
  _Feed createState() => new _Feed();
}

class _Feed extends State<Feed> {
  List<ImagePost> feedData;

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

  buildFeed() {
    if (feedData != null) {
      return new ListView(
        children: feedData,
      );
    } else {
      return new Container(
          alignment: FractionalOffset.center,
          child: new CircularProgressIndicator());
    }
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: const Text('InstaGroove',
            style: const TextStyle(
                fontFamily: "Billabong", color: Colors.black, fontSize: 35.0)),
        centerTitle: true,
        backgroundColor: Colors.white,
      ),
      body: new RefreshIndicator(
        onRefresh: _refresh,
        child: buildFeed(),
      ),
    );
  }

  Future<Null> _refresh() async {
    await _getFeed();

    setState(() {

    });

    return;
  }

  _loadFeed() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    String json = prefs.getString("feed");

    if (json != null) {
      List<Map<String, dynamic>> data =
          jsonDecode(json).cast<Map<String, dynamic>>();
      List<ImagePost> listOfPosts = _generateFeed(data);
      setState(() {
        feedData = listOfPosts;
      });
    } else {
      _getFeed();
    }
  }

  _getFeed() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();

    String userId = googleSignIn.currentUser.id.toString();
    var url =
        'https://us-central1-mp-rps.cloudfunctions.net/getFeed?uid=' + userId;
    var httpClient = new HttpClient();

    List<ImagePost> listOfPosts;
    String result;
    try {
      var request = await httpClient.getUrl(Uri.parse(url));
      var response = await request.close();
      if (response.statusCode == HttpStatus.OK) {
        String json = await response.transform(utf8.decoder).join();
        prefs.setString("feed", json);
        List<Map<String, dynamic>> data =
        jsonDecode(json).cast<Map<String, dynamic>>();
        listOfPosts = _generateFeed(data);
      } else {
        result =
            'Error getting a feed:\nHttp status ${response.statusCode}';
      }
    } catch (exception) {
      result =
          'Failed invoking the getFeed function. Exception: $exception';
    }
    print(result);

    setState(() {
      feedData = listOfPosts;
    });
  }

  List<ImagePost> _generateFeed(List<Map<String, dynamic>> feedData) {
    List<ImagePost> listOfPosts = [];

    for (var postData in feedData) {
      listOfPosts.add(new ImagePost.fromJSON(postData));
    }

    return listOfPosts;
  }
}

导入“包装：颤振/材料.省道”；
导入“image_post.dart”；
导入“dart:async”；
导入“包：async/async.dart”；
导入“main.dart”；
导入“dart:io”；
导入“dart:convert”；
导入“package:shared_preferences/shared_preferences.dart”；
类提要扩展了StatefulWidget{
_Feed createState（）=>new_Feed（）；
}
类_提要扩展了状态{
列出数据；
@凌驾
void initState（）{
super.initState（）；
这个；
}
buildFeed（）{
如果（feedData！=null）{
返回新的ListView(
儿童：feedData，
);
}否则{
退回新货柜(
对齐：分馏loffset.center，
子对象：新循环ProgressIndicator（））；
}
}
@凌驾
小部件构建（构建上下文）{
归还新脚手架(
appBar：新的appBar(
标题：常量文本（“InstaGroove”，
样式：consttextstyle(
fontFamily：“Billabong”，颜色：Colors.black，fontSize:35.0），
标题：对，
背景颜色：Colors.white，
),
正文：新的刷新指示器(
onRefresh:\u refresh，
子级：buildFeed（），
),
);
}
Future\u refresh（）异步{
等待_getFeed（）；
设置状态（）{
});
返回；
}
_loadFeed（）异步{
SharedReferences prefs=等待SharedReferences.getInstance（）；
String json=prefs.getString（“提要”）；
if（json！=null）{
列表数据=
jsonDecode（json.cast（）；
listOfPosts=\u generateFeed（数据）；
设置状态（）{
feedData=邮件列表；
});
}否则{
_getFeed（）；
}
}
_getFeed（）异步{
SharedReferences prefs=等待SharedReferences.getInstance（）；
字符串userId=googleSignIn.currentUser.id.toString（）；
变量url=
'https://us-central1-mp-rps.cloudfunctions.net/getFeed?uid='+用户ID；
var httpClient=新的httpClient（）；
邮件列表；
字符串结果；
试一试{
var request=wait-httpClient.getUrl（Uri.parse（url））；
var response=wait request.close（）；
if（response.statusCode==HttpStatus.OK）{
String json=wait response.transform（utf8.decoder.join（）；
prefs.setString（“提要”，json）；
列表数据=
jsonDecode（json.cast（）；
listOfPosts=\u generateFeed（数据）；
}否则{
结果=
'获取提要时出错：\nHttp status${response.statusCode}'；
}
}捕获（例外）{
结果=
'调用getFeed函数失败。异常：$Exception'；
}
打印（结果）；
设置状态（）{
feedData=邮件列表；
});
}
列表_generateFeed（列表feedData）{
listOfPosts=[]；
for（feedData中的var postData）{
添加（新的ImagePost.fromJSON（postData））；
}
返回邮件列表；
}
}

---

我在谷歌和youtube上做了一些研究，但我不知道如何将卡片转盘添加到我的应用程序的提要部分。我还是一个新手，所以任何帮助都是令人惊奇的！提前谢谢！！：）

试试这段代码。这是一个示例图像转盘屏幕。目前，使用的是硬编码图像列表，您可以根据api调用中的图像列表创建

image.network（）

的动态列表

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class TestImageCarousel extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _TestImageCarousel();
  }
}

class _TestImageCarousel extends State<TestImageCarousel> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Material(
        child: Stack(
      children: <Widget>[
        PageView(
          onPageChanged: (id) {
            //code to handle page change
          },
          scrollDirection: Axis.horizontal,
          children: getImageList(),
        ),
      ],
    ));
  }
}

/*
Get image list to populate in carousel
 */
getImageList() {
  return <Widget>[
    Padding(
      padding: EdgeInsets.only(left: 1, right: 1),
      child: Image.network("https://www.gstatic.com/webp/gallery/1.jpg",
          fit: BoxFit.fill),
    ),
    Padding(
      padding: EdgeInsets.only(left: 1, right: 1),
      child: Image.network("https://www.gstatic.com/webp/gallery/2.jpg",
          fit: BoxFit.fill),
    ),
    Padding(
      padding: EdgeInsets.only(left: 1, right: 1),
      child: Image.network("https://www.gstatic.com/webp/gallery/3.jpg",
          fit: BoxFit.fill),
    ),
    Padding(
      padding: EdgeInsets.only(left: 1, right: 1),
      child: Image.network("https://www.gstatic.com/webp/gallery/4.jpg",
          fit: BoxFit.fill),
    )
  ];
}

import'包装：flift/cupertino.dart'；
进口“包装：颤振/材料.省道”；
类TestImageCarousel扩展StatefulWidget{
@凌驾
状态createState（）{
//TODO:实现createState
返回_TestImageCarousel（）；
}
}
类_TestImageCarousel扩展状态{
@凌驾
void initState（）{
super.initState（）；
}
@凌驾
小部件构建（构建上下文）{
退货(
子：堆栈(
儿童：[
页面浏览(
onPageChanged:（id）{
//处理页面更改的代码
},
滚动方向：轴水平，
子项：getImageList（），
),
],
));
}
}
/*
获取要在旋转木马中填充的图像列表
*/
getImageList（）{
返回[
填充物(
填充：仅限边设置（左：1，右：1），
子项：Image.network（“https://www.gstatic.com/webp/gallery/1.jpg",
适合：BoxFit.填充），
),
填充物(
填充：仅限边设置（左：1，右：1），
子项：Image.network（“https://www.gstatic.com/webp/gallery/2.jpg",
适合：BoxFit.填充），
),
填充物(
填充：仅限边设置（左：1，右：1），
子项：Image.network（“https://www.gstatic.com/webp/gallery/3.jpg",
适合：BoxFit.填充），
),
填充物(
填充：仅限边设置（左：1，右：1），
子项：Image.network（“https://www.gstatic.com/webp/gallery/4.jpg",
适合：BoxFit.填充），
)
];
}

现在，您可以通过网络调用获取提要图像列表，并将列表绑定到

image.network（“src”）

。您还可以添加页面控制器以获得自动旋转木马效果。在

InkWell（）

中添加此图像以获取onTap侦听器