Flutter-轮播图

//https://juejin.im/post/5c3f3c29f265da6120621048

import 'package:flutter/material.dart';

import 'package:flutter_swiper/flutter_swiper.dart';// 引入头文件

class SwiperViewextends StatefulWidget {

@override

  _SwiperViewState createState() => _SwiperViewState();

}

class _SwiperViewStateextends State {

// 声明一个list,存放image Widget

  ListimageList = List();

@override

  void initState() {

imageList

      ..add(Image.network(

'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2726034926,4129010873&fm=26&gp=0.jpg',

fit: BoxFit.fill,

))

..add(Image.network(

'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3485348007,2192172119&fm=26&gp=0.jpg',

fit: BoxFit.fill,

))

..add(Image.network(

'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2594792439,969125047&fm=26&gp=0.jpg',

fit: BoxFit.fill,

))

..add(Image.network(

'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=190488632,3936347730&fm=26&gp=0.jpg',

fit: BoxFit.fill,

));

super.initState();

}

@override

  Widget build(BuildContext context) {

return Scaffold(

backgroundColor: Colors.black12,

appBar: AppBar(title: Text('轮播图'),),

body: ListView(// 这里使用listView是因为本地写了几组不同样式的展示,太懒了,所以这里就没有改

          children: [

firstSwiperView()

],

)

);

}

Widget firstSwiperView() {

return Container(

padding:const EdgeInsets.fromLTRB(0,50,0,5),

width: MediaQuery.of(context).size.width,

height:300,

child: Swiper(

itemCount:4,

itemBuilder: _swiperBuilder,

pagination: SwiperPagination(

alignment: Alignment.bottomRight,

margin:const EdgeInsets.fromLTRB(0,0,20,10),

builder: DotSwiperPaginationBuilder(

color: Colors.black54,

activeColor: Colors.white

            )

),

controller: SwiperController(),

scrollDirection: Axis.horizontal,

autoplay:true,

onTap: (index) => print('点击了第$index'),

),

);

}

Widget _swiperBuilder(BuildContext context, int index) {

return (imageList[index]);

}

}

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 这个轮播组件 有点 有参考意义 贴出来 玩玩 installation 安装 在你的 pubspec.yaml 中...
    ZhiPengTu阅读 11,628评论 0 2
  • 注意: 图片链接是https的 在pubspec.yaml 导入库 flutter_swiper : ^1....
    小郭米阅读 4,770评论 0 2
  • 摘要:Android Flutter实践内存初探 闲鱼技术-匠修我们想使用Flutter来统一移动App开发并做了...
    猫耳呀阅读 3,349评论 0 1
  • 万事皆 Widget Widget 是每个 Flutter 应用的基础。每个 Widget 是一部分用户界面上不可...
    三季人阅读 5,649评论 1 2
  • 创业也有起跑线,这句话深有感触。 有的人用资源创业,有的人凭本事创业,有的人凭概念创业,创业之路千奇百怪,同样都在...
    王前闯阅读 2,166评论 0 0

友情链接更多精彩内容