devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

初学Flutter：swiper实现_flutter_swiper

作者：凡人多烦事01 | 2024-03-20 02:20:00

赞

踩

flutter_swiper

效果展示：

flutter swiper

1、安装 card_swiper 

2、引入card_swiper

import 'package:card_swiper/card_swiper.dart';

3、使用

这里我主要是对官网例子进行实践，主要是5种常用的swiper

1、普遍的swiper

  1. //custom swiper
  2. class CustomSwiper extends StatefulWidget {
  3.   const CustomSwiper({super.key, required this.banner});
  4.   final List banner;
  5.  
  6.   @override
  7.   _CustomSwiperState createState() => _CustomSwiperState();
  8. }
  9.  
  10. class _CustomSwiperState extends State<CustomSwiper> {
  11.   @override
  12.   Widget build(BuildContext context) {
  13.     return Swiper(
  14.       itemBuilder: (BuildContext context, int index) {
  15.         return Image.network(
  16.           widget.banner[index]['banner_url'],
  17.           fit: BoxFit.fill,
  18.         );
  19.       },
  20.       onTap: (index) {
  21.         print(index);
  22.       },
  23.       itemCount: widget.banner.length,
  24.       // autoplay: true,
  25.       pagination: const SwiperPagination(
  26.           builder: DotSwiperPaginationBuilder(
  27.               color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),
  28.       control: SwiperControl(),
  29.     );
  30.   }
  31. }

2、layouts swiper

  1. //layouts swiper
  2. class MyLayoutSwiper extends StatefulWidget {
  3.   const MyLayoutSwiper({super.key, required this.banner});
  4.   final List banner;
  5.  
  6.   @override
  7.   _MyLayoutSwiperState createState() => _MyLayoutSwiperState();
  8. }
  9.  
  10. class _MyLayoutSwiperState extends State<MyLayoutSwiper> {
  11.   @override
  12.   Widget build(BuildContext context) {
  13.     return Swiper(
  14.       itemBuilder: (BuildContext context, int index) {
  15.         return Image.network(
  16.           widget.banner[index]['banner_url'],
  17.           fit: BoxFit.fill,
  18.         );
  19.       },
  20.       onTap: (index) {
  21.         print(index);
  22.       },
  23.       itemCount: widget.banner.length,
  24.       // autoplay: true,
  25.       pagination: const SwiperPagination(
  26.           builder: DotSwiperPaginationBuilder(
  27.               color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),
  28.       viewportFraction: 0.8,
  29.       scale: 0.9,
  30.     );
  31.   }
  32. }

3、STACK Layout swiper

  1. // STACK Layout swiper
  2. class StackLayoutSwiper extends StatefulWidget {
  3.   const StackLayoutSwiper({super.key, required this.banner});
  4.   final List banner;
  5.  
  6.   @override
  7.   _StackLayoutSwiperState createState() => _StackLayoutSwiperState();
  8. }
  9.  
  10. class _StackLayoutSwiperState extends State<StackLayoutSwiper> {
  11.   @override
  12.   Widget build(BuildContext context) {
  13.     return Swiper(
  14.       itemBuilder: (BuildContext context, int index) {
  15.         return Image.network(
  16.           widget.banner[index]['banner_url'],
  17.           fit: BoxFit.fill,
  18.         );
  19.       },
  20.       onTap: (index) {
  21.         print(index);
  22.       },
  23.       itemCount: widget.banner.length,
  24.       // autoplay: true,
  25.       pagination: const SwiperPagination(
  26.           builder: DotSwiperPaginationBuilder(
  27.               color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),
  28.       viewportFraction: 0.8,
  29.       scale: 0.9,
  30.       itemWidth: 300.0,
  31.       layout: SwiperLayout.STACK,
  32.     );
  33.   }
  34. }

4、TINDER Layout Swiper

  1. // TINDER Layout Swiper
  2. class TinderLayoutSwiper extends StatefulWidget {
  3.   const TinderLayoutSwiper({super.key, required this.banner});
  4.   final List banner;
  5.  
  6.   @override
  7.   _TinderLayoutSwiperState createState() => _TinderLayoutSwiperState();
  8. }
  9.  
  10. class _TinderLayoutSwiperState extends State<TinderLayoutSwiper> {
  11.   @override
  12.   Widget build(BuildContext context) {
  13.     return Swiper(
  14.       itemBuilder: (BuildContext context, int index) {
  15.         return Image.network(
  16.           widget.banner[index]['banner_url'],
  17.           fit: BoxFit.fill,
  18.         );
  19.       },
  20.       onTap: (index) {
  21.         print(index);
  22.       },
  23.       itemCount: widget.banner.length,
  24.       // autoplay: true,
  25.       pagination: const SwiperPagination(
  26.           builder: DotSwiperPaginationBuilder(
  27.               color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),
  28.       viewportFraction: 0.8,
  29.       scale: 0.9,
  30.       itemWidth: 300.0,
  31.       itemHeight: 400.0,
  32.       layout: SwiperLayout.TINDER,
  33.     );
  34.   }
  35. }
  36.

5、CUSTOM LAYOUT Swiper

  1. // TINDER Layout Swiper
  2. class TinderLayoutSwiper extends StatefulWidget {
  3.   const TinderLayoutSwiper({super.key, required this.banner});
  4.   final List banner;
  5.  
  6.   @override
  7.   _TinderLayoutSwiperState createState() => _TinderLayoutSwiperState();
  8. }
  9.  
  10. class _TinderLayoutSwiperState extends State<TinderLayoutSwiper> {
  11.   @override
  12.   Widget build(BuildContext context) {
  13.     return Swiper(
  14.       itemBuilder: (BuildContext context, int index) {
  15.         return Image.network(
  16.           widget.banner[index]['banner_url'],
  17.           fit: BoxFit.fill,
  18.         );
  19.       },
  20.       onTap: (index) {
  21.         print(index);
  22.       },
  23.       itemCount: widget.banner.length,
  24.       // autoplay: true,
  25.       pagination: const SwiperPagination(
  26.           builder: DotSwiperPaginationBuilder(
  27.               color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),
  28.       viewportFraction: 0.8,
  29.       scale: 0.9,
  30.       itemWidth: 300.0,
  31.       itemHeight: 400.0,
  32.       layout: SwiperLayout.TINDER,
  33.     );
  34.   }
  35. }
  36.  
  37.  
  38. // CUSTOM LAYOUT Swiper
  39. class CustomLayoutSwiper extends StatefulWidget {
  40.   const CustomLayoutSwiper({super.key, required this.banner});
  41.   final List banner;
  42.  
  43.   @override
  44.   _CustomLayoutSwiperState createState()=>_CustomLayoutSwiperState();
  45.  
  46. }
  47. class _CustomLayoutSwiperState extends State<CustomLayoutSwiper>{
  48.   @override
  49.   Widget build(BuildContext context) {
  50.     // TODO: implement build
  51.     return Swiper(
  52.       itemBuilder: (BuildContext context, int index) {
  53.         return Image.network(
  54.           widget.banner[index]['banner_url'],
  55.           fit: BoxFit.fill,
  56.         );
  57.       },
  58.       onTap: (index) {
  59.         print(index);
  60.       },
  61.       itemCount: widget.banner.length,
  62.       // autoplay: true,
  63.       pagination: const SwiperPagination(
  64.           builder: DotSwiperPaginationBuilder(
  65.               color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),
  66.       viewportFraction: 0.8,
  67.       scale: 0.9,
  68.       itemWidth: 300.0,
  69.       itemHeight: 400.0,
  70.       layout: SwiperLayout.CUSTOM,
  71.        customLayoutOption: CustomLayoutOption(
  72.     startIndex: -1,
  73.     stateCount: 3
  74.   )..addRotate([
  75.     -45.0/180,
  76.     0.0,
  77.     45.0/180
  78.   ])..addTranslate([
  79.     Offset(-370.0, -40.0),
  80.     Offset(0.0, 0.0),
  81.     Offset(370.0, -40.0)
  82.   ]),
  83.     );
  84.   }
  85.   
  86. }

main.dart全部代码

  1. import 'package:flutter/material.dart';
  2. import 'package:card_swiper/card_swiper.dart';
  3.  
  4. void main() {
  5.   runApp(const MyApp());
  6. }
  7.  
  8. class MyApp extends StatelessWidget {
  9.   const MyApp({super.key});
  10.  
  11.   @override
  12.   Widget build(BuildContext context) {
  13.     return MaterialApp(
  14.         theme: ThemeData(
  15.             colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple)),
  16.         home: const Home());
  17.   }
  18. }
  19.  
  20. class Home extends StatefulWidget {
  21.   const Home({super.key});
  22.  
  23.   @override
  24.   _HomeState createState() => _HomeState();
  25. }
  26.  
  27. class _HomeState extends State<Home> {
  28.   List banner = [
  29.     {
  30.       "banner_url":
  31.           "https://ts1.cn.mm.bing.net/th/id/R-C.8e091d0e6a2b9bcb27738cd96e22f699?rik=M4LFAVmmb38W6A&riu=http%3a%2f%2fi3.img.969g.com%2fdown%2fimgx2013%2f01%2f21%2f206_170432_901de.jpg&ehk=564uTBfxvugUBybGO2%2bTpMUNgJEa6rUfSrc1sonLso8%3d&risl=&pid=ImgRaw&r=0"
  32.     },
  33.     {
  34.       "banner_url":
  35.           "https://ts1.cn.mm.bing.net/th/id/R-C.abd4829c9387ec1bfd1a276a5c1da122?rik=dl55Voqxy4wINQ&riu=http%3a%2f%2fi1.073img.com%2f140306%2f4343693_144142_1.jpg&ehk=qvhMjT0iGQT5DhH8MTkAzJqUpjHJRScTQTT5hj%2forLM%3d&risl=&pid=ImgRaw&r=0"
  36.     },
  37.     {
  38.       "banner_url":
  39.           "https://ts1.cn.mm.bing.net/th/id/R-C.ddfbf9ed55354323035f947515fe0233?rik=0KFdFk3RHUzBdg&riu=http%3a%2f%2fi1.img.969g.com%2fdown%2fimgx2013%2f01%2f05%2f206_164916_4fab0.jpg&ehk=Vqb%2f5c3%2fW5n39t7bAae6YpUlfG4ibEbf9lpETY5Xz4c%3d&risl=&pid=ImgRaw&r=0"
  40.     }
  41.   ];
  42.   @override
  43.   Widget build(BuildContext context) {
  44.     return Scaffold(
  45.         appBar: AppBar(title: const Text('flutter轮播图学习'), centerTitle: true),
  46.         // body: Container(child: Text('pp')),
  47.         body: SingleChildScrollView(
  48.           child: Column(children: [
  49.             const Text('Custom swiper',
  50.                 style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold)),
  51.             SizedBox(
  52.                 height: 200,
  53.                 child: CustomSwiper(
  54.                   banner: banner,
  55.                 )),
  56.             const Text('Build in layouts ',
  57.                 style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold)),
  58.             SizedBox(
  59.                 height: 200,
  60.                 child: MyLayoutSwiper(
  61.                   banner: banner,
  62.                 )),
  63.             const Text('Build in STACK layouts ',
  64.                 style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold)),
  65.             SizedBox(
  66.                 height: 200,
  67.                 child: StackLayoutSwiper(
  68.                   banner: banner,
  69.                 )),
  70.             const Text('Build in  TINDER layouts ',
  71.                 style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold)),
  72.             SizedBox(
  73.                 height: 200,
  74.                 child: TinderLayoutSwiper(
  75.                   banner: banner,
  76.                 )),
  77.  
  78.                 const Text('Build in  CUSTOM layouts ',
  79.                 style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold)),
  80.             SizedBox(
  81.                 height: 200,
  82.                 child: CustomLayoutSwiper(
  83.                   banner: banner,
  84.                 )),
  85.           ]),
  86.         ));
  87.   }
  88. }
  89.  
  90. //custom swiper
  91. class CustomSwiper extends StatefulWidget {
  92.   const CustomSwiper({super.key, required this.banner});
  93.   final List banner;
  94.  
  95.   @override
  96.   _CustomSwiperState createState() => _CustomSwiperState();
  97. }
  98.  
  99. class _CustomSwiperState extends State<CustomSwiper> {
  100.   @override
  101.   Widget build(BuildContext context) {
  102.     return Swiper(
  103.       itemBuilder: (BuildContext context, int index) {
  104.         return Image.network(
  105.           widget.banner[index]['banner_url'],
  106.           fit: BoxFit.fill,
  107.         );
  108.       },
  109.       onTap: (index) {
  110.         print(index);
  111.       },
  112.       itemCount: widget.banner.length,
  113.       // autoplay: true,
  114.       pagination: const SwiperPagination(
  115.           builder: DotSwiperPaginationBuilder(
  116.               color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),
  117.       control: SwiperControl(),
  118.     );
  119.   }
  120. }
  121.  
  122. //layouts swiper
  123. class MyLayoutSwiper extends StatefulWidget {
  124.   const MyLayoutSwiper({super.key, required this.banner});
  125.   final List banner;
  126.  
  127.   @override
  128.   _MyLayoutSwiperState createState() => _MyLayoutSwiperState();
  129. }
  130.  
  131. class _MyLayoutSwiperState extends State<MyLayoutSwiper> {
  132.   @override
  133.   Widget build(BuildContext context) {
  134.     return Swiper(
  135.       itemBuilder: (BuildContext context, int index) {
  136.         return Image.network(
  137.           widget.banner[index]['banner_url'],
  138.           fit: BoxFit.fill,
  139.         );
  140.       },
  141.       onTap: (index) {
  142.         print(index);
  143.       },
  144.       itemCount: widget.banner.length,
  145.       // autoplay: true,
  146.       pagination: const SwiperPagination(
  147.           builder: DotSwiperPaginationBuilder(
  148.               color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),
  149.       viewportFraction: 0.8,
  150.       scale: 0.9,
  151.     );
  152.   }
  153. }
  154.  
  155. // STACK Layout swiper
  156. class StackLayoutSwiper extends StatefulWidget {
  157.   const StackLayoutSwiper({super.key, required this.banner});
  158.   final List banner;
  159.  
  160.   @override
  161.   _StackLayoutSwiperState createState() => _StackLayoutSwiperState();
  162. }
  163.  
  164. class _StackLayoutSwiperState extends State<StackLayoutSwiper> {
  165.   @override
  166.   Widget build(BuildContext context) {
  167.     return Swiper(
  168.       itemBuilder: (BuildContext context, int index) {
  169.         return Image.network(
  170.           widget.banner[index]['banner_url'],
  171.           fit: BoxFit.fill,
  172.         );
  173.       },
  174.       onTap: (index) {
  175.         print(index);
  176.       },
  177.       itemCount: widget.banner.length,
  178.       // autoplay: true,
  179.       pagination: const SwiperPagination(
  180.           builder: DotSwiperPaginationBuilder(
  181.               color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),
  182.       viewportFraction: 0.8,
  183.       scale: 0.9,
  184.       itemWidth: 300.0,
  185.       layout: SwiperLayout.STACK,
  186.     );
  187.   }
  188. }
  189.  
  190. // TINDER Layout Swiper
  191. class TinderLayoutSwiper extends StatefulWidget {
  192.   const TinderLayoutSwiper({super.key, required this.banner});
  193.   final List banner;
  194.  
  195.   @override
  196.   _TinderLayoutSwiperState createState() => _TinderLayoutSwiperState();
  197. }
  198.  
  199. class _TinderLayoutSwiperState extends State<TinderLayoutSwiper> {
  200.   @override
  201.   Widget build(BuildContext context) {
  202.     return Swiper(
  203.       itemBuilder: (BuildContext context, int index) {
  204.         return Image.network(
  205.           widget.banner[index]['banner_url'],
  206.           fit: BoxFit.fill,
  207.         );
  208.       },
  209.       onTap: (index) {
  210.         print(index);
  211.       },
  212.       itemCount: widget.banner.length,
  213.       // autoplay: true,
  214.       pagination: const SwiperPagination(
  215.           builder: DotSwiperPaginationBuilder(
  216.               color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),
  217.       viewportFraction: 0.8,
  218.       scale: 0.9,
  219.       itemWidth: 300.0,
  220.       itemHeight: 400.0,
  221.       layout: SwiperLayout.TINDER,
  222.     );
  223.   }
  224. }
  225.  
  226.  
  227. // CUSTOM LAYOUT Swiper
  228. class CustomLayoutSwiper extends StatefulWidget {
  229.   const CustomLayoutSwiper({super.key, required this.banner});
  230.   final List banner;
  231.  
  232.   @override
  233.   _CustomLayoutSwiperState createState()=>_CustomLayoutSwiperState();
  234.  
  235. }
  236. class _CustomLayoutSwiperState extends State<CustomLayoutSwiper>{
  237.   @override
  238.   Widget build(BuildContext context) {
  239.     // TODO: implement build
  240.     return Swiper(
  241.       itemBuilder: (BuildContext context, int index) {
  242.         return Image.network(
  243.           widget.banner[index]['banner_url'],
  244.           fit: BoxFit.fill,
  245.         );
  246.       },
  247.       onTap: (index) {
  248.         print(index);
  249.       },
  250.       itemCount: widget.banner.length,
  251.       // autoplay: true,
  252.       pagination: const SwiperPagination(
  253.           builder: DotSwiperPaginationBuilder(
  254.               color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),
  255.       viewportFraction: 0.8,
  256.       scale: 0.9,
  257.       itemWidth: 300.0,
  258.       itemHeight: 400.0,
  259.       layout: SwiperLayout.CUSTOM,
  260.        customLayoutOption: CustomLayoutOption(
  261.     startIndex: -1,
  262.     stateCount: 3
  263.   )..addRotate([
  264.     -45.0/180,
  265.     0.0,
  266.     45.0/180
  267.   ])..addTranslate([
  268.     Offset(-370.0, -40.0),
  269.     Offset(0.0, 0.0),
  270.     Offset(370.0, -40.0)
  271.   ]),
  272.     );
  273.   }
  274.   
  275. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/269939
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号