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(),  //左右的那个箭头,在某模拟器中会出现蓝线
      ),
    );
  }
}
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值