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(),  //左右的那個箭頭,在某模擬器中會出現藍線
      ),
    );
  }
}