如何向 Flutter 应用添加水平卡片轮播视图

Question

您好，我正在使用颤振进行 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;
  }
}

我在 google 和 youtube 上做了一些研究，但我不知道如何将卡片轮播添加到我的应用程序的提要部分。我对颤动还很陌生，所以任何帮助都会很棒！提前致谢！！ :)

Answer 1

试试这个代码。这是一个示例图像轮播屏幕。目前，使用的是硬编码的图像列表，您可以根据 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),
    )
  ];
}

现在您可以通过网络调用获取提要图像列表并将列表绑定到Image.network("src")。您还可以添加页面控制器以获得自动轮播效果。将此图片添加到 InkWell() 以获得 onTap 监听器。