Flutter 组件轮播图 flutter_swiper

最新推荐文章于 2024-08-15 09:22:36 发布

swcgo

最新推荐文章于 2024-08-15 09:22:36 发布

阅读量1.5k

点赞数

分类专栏： Flutter

本文链接：https://blog.csdn.net/swcgo/article/details/88543398

版权

Flutter 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

每日学一点

直接上代码

使用了

  dio: ^2.0.14
  json_serializable: ^1.3.0
  http: ^0.12.0
  flutter_swiper: ^1.1.5

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_a1/Util/HttpController.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

// http://www.mocky.io/v2/5b7143ae3200001402f36c46

class Sanimgs extends StatefulWidget {
  @override
  _SanimgsState createState() => _SanimgsState();
}

class _SanimgsState extends State<Sanimgs> {
  var _items = [];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: buildAppBar(context),
      body: Container(
          width: MediaQuery.of(context).size.width,
          height: 200.0,
          child: layout2_gogo()),
    );
  }

  @override
  void initState() {
    super.initState();
    getData();
  }

  //获取网络数据.先使用这个测试.
  void getData() {
    HttpController.get("http://www.mocky.io/v2/5b7143ae3200001402f36c46",
        (data) {
      debugPrint("查看数据是什么问题" + data.toString());
      if (data != null) {
        final body = json.decode(data.toString());
        final feeds = body["data"]['pics'];
        var items = [];

        debugPrint("增加feeds:::::" + feeds.toString());
        debugPrint("增加feeds::1:::" + feeds[0]);
        debugPrint("增加feeds::2:::" + feeds[1]);
        debugPrint("增加feeds::3:::" + feeds[2]);

        feeds.forEach((item) {
          debugPrint("增加一个" + item.toString());
          items.add(ImagesModel(item));
        });
        setState(() {
          //dataStr = data.toString();

          _items = items;
        });
      }
    }, params: null);
  }

//这里定义的头部
  Widget buildAppBar(BuildContext context) {
    return new AppBar(title: const Text('历史今日'));
  }

  //这里是加载图片的方法.
  Widget _swiperBuilder(BuildContext context, int index) {
    ImagesModel im = this._items[index];
    debugPrint(im.pic);
    return (Image.network(
      im.pic,
      fit: BoxFit.fill,
    ));
  }

  Widget layout2_gogo() {
    Widget childWidget;
    //判断是网络上的图片是不是已加载.没有下载 放提示.要不出异常错误.()
    if (_items.length == 0) {
      childWidget = new Stack(
        children: <Widget>[
          new Padding(
            padding: new EdgeInsets.fromLTRB(0.0, 35.0, 0.0, 0.0),
            child: new Center(
              child: new Text('正在加载中，莫着急哦~'),
            ),
          ),
        ],
      );
    } else {
      //加载图片完成.可以显示
      childWidget = new Swiper(
        itemBuilder: _swiperBuilder,
        itemCount: _items.length,
        pagination: new SwiperPagination(
            builder: DotSwiperPaginationBuilder(
          color: Colors.black54,
          activeColor: Colors.white,
        )),
        control: new SwiperControl(),
        scrollDirection: Axis.horizontal,
        autoplay: true,
        onTap: (index) => debugPrint("增加feeds点击了第$index个"),
      );
    }
    return childWidget;
  }
}

//定义了数据的类型
class ImagesModel {
  String pic;

  ImagesModel(this.pic);
}