• 初学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. }

  • 相关阅读:
    【学习笔记】《Python深度学习》第五章：深度学习用于计算机视觉
    Hive进阶函数之【分割函数（split)、行转列函数（explode)、lateral view】
    java lambda之方法句柄&invokedynamic指令
    平衡树 Treap & Splay [学习笔记]
    基于vue和nodejs的项目知识信息分享平台
    网络安全CTF比赛有哪些事？——《CTF那些事儿》告诉你
    重制版 day 08字典和元组
    Python重要语法回顾-2-流程控制(顺序、选择、循环)、函数、包、异常、文件操作、类、时间
    Eclipse 内容辅助
    具备自纠正和逐维学习能力的粒子群算法-附代码
  • 原文地址：https://blog.csdn.net/Hhjian524/article/details/134218456