flutter学习（五）Swiper左右滑动图片

本文将要学习的组件是Swiper组件

效果

滑动效果如下

代码解析

要想左右滑动出现这么多图片，图片网址要准备好

List<Map> imgList=[
    {
      "url":"https://pic2.zhimg.com/v2-848ed6d4e1c845b128d2ec719a39b275_b.jpg"
    },
    {
      "url":"https://pic2.zhimg.com/80/v2-40c024ce464642fcab3bbf1b0a233174_hd.jpg"
    },
    {
      "url":"https://pic4.zhimg.com/80/v2-9cf53967a3825fb27b4199b771cb692b_720w.jpg"
    },
    {
      "url":"https://pic3.zhimg.com/80/v2-130838b9c036021e3656b30b01e55ce2_720w.jpg"
    },
    {
      "url":"https://pic2.zhimg.com/80/v2-552354a50944d5146fdb42dfc692dd51_720w.jpg"
    },
    {
      "url":"http://picture.name/images/2019/01/24/21515938.jpg"
    }
  ];

可以看到，这里使用了一个装上map的List，每一张图片在List中的位置固定，待会只需要传入List每一个位置中的url，即可传入真实的网址

body:  new Swiper(
  itemBuilder: (BuildContext context,int index){
    return Container(
      width: 300,
      child:AspectRatio(
        aspectRatio:4.0/3.0,
        child:Image.network(imgList[index]["url"],)
    )
    );
  },
  itemCount: imgList.length,
  pagination: new SwiperPagination(),//下面的分页小点

在build函数的body中，返回的是Swiper
aspectRatio表示图片比例统一为4:3，然后在传入图片位置和url
但是这样得到的图片是这样的

此时我们需要这样修改，就可以得到刚开始的效果了

child:Image.network(imgList[index]["url"],fit: BoxFit.cover,)

以下是源代码

源代码

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

import 'package:flutter_swiper/flutter_swiper.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',

      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Map> imgList=[
    {
      "url":"https://pic2.zhimg.com/v2-848ed6d4e1c845b128d2ec719a39b275_b.jpg"
    },
    {
      "url":"https://pic2.zhimg.com/80/v2-40c024ce464642fcab3bbf1b0a233174_hd.jpg"
    },
    {
      "url":"https://pic4.zhimg.com/80/v2-9cf53967a3825fb27b4199b771cb692b_720w.jpg"
    },
    {
      "url":"https://pic3.zhimg.com/80/v2-130838b9c036021e3656b30b01e55ce2_720w.jpg"
    },
    {
      "url":"https://pic2.zhimg.com/80/v2-552354a50944d5146fdb42dfc692dd51_720w.jpg"
    },
    {
      "url":"http://picture.name/images/2019/01/24/21515938.jpg"
    }
  ];
   @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body:  new Swiper(
        itemBuilder: (BuildContext context,int index){
          return Container(
            width: 300,
          child:AspectRatio(
              aspectRatio:4.0/3.0,
              child:Image.network(imgList[index]["url"],fit: BoxFit.cover,)
          )
          );
        },
        itemCount: imgList.length,
        pagination: new SwiperPagination(),//下面的分页小点
//        control: new SwiperControl(),  //左右的那个箭头,在某模拟器中会出现蓝线
      ),
    );
  }
}