28 Flutter 轮播图 flutter_swiper

- 日理万妓 2023-08-17 15:59 149阅读 0赞

中文地址：

[https://github.com/best-flutter/flutter\_swiper/blob/master/README-ZH.md][https_github.com_best-flutter_flutter_swiper_blob_master_README-ZH.md]

#### 基本参数 ####

<table> 
 <thead> 
  <tr> 
   <th align="left">参数</th> 
   <th align="center">默认值</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">scrollDirection</td> 
   <td align="center">Axis.horizontal</td> 
   <td align="left">滚动方向，设置为Axis.vertical如果需要垂直滚动</td> 
  </tr> 
  <tr> 
   <td align="left">loop</td> 
   <td align="center">true</td> 
   <td align="left">无限轮播模式开关</td> 
  </tr> 
  <tr> 
   <td align="left">index</td> 
   <td align="center">0</td> 
   <td align="left">初始的时候下标位置</td> 
  </tr> 
  <tr> 
   <td align="left">autoplay</td> 
   <td align="center">false</td> 
   <td align="left">自动播放开关.</td> 
  </tr> 
  <tr> 
   <td align="left">onIndexChanged</td> 
   <td align="center">void onIndexChanged(int index)</td> 
   <td align="left">当用户手动拖拽或者自动播放引起下标改变的时候调用</td> 
  </tr> 
  <tr> 
   <td align="left">onTap</td> 
   <td align="center">void onTap(int index)</td> 
   <td align="left">当用户点击某个轮播的时候调用</td> 
  </tr> 
  <tr> 
   <td align="left">duration</td> 
   <td align="center">300.0</td> 
   <td align="left">动画时间，单位是毫秒</td> 
  </tr> 
  <tr> 
   <td align="left">pagination</td> 
   <td align="center">null</td> 
   <td align="left">设置&nbsp;<code>new SwiperPagination()</code>&nbsp;展示默认分页指示器</td> 
  </tr> 
  <tr> 
   <td align="left">control</td> 
   <td align="center">null</td> 
   <td align="left">设置&nbsp;<code>new SwiperControl()</code>&nbsp;展示默认分页按钮</td> 
  </tr> 
 </tbody> 
</table>

#### 分页指示器 ####

分页指示器继承自 `SwiperPlugin`,`SwiperPlugin` 为 `Swiper` 提供额外的界面.设置为`new SwiperPagination()` 展示默认分页.

<table> 
 <thead> 
  <tr> 
   <th align="left">参数</th> 
   <th align="center">默认值</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">alignment</td> 
   <td align="center">Alignment.bottomCenter</td> 
   <td align="left">如果要将分页指示器放到其他位置，那么可以修改这个参数</td> 
  </tr> 
  <tr> 
   <td align="left">margin</td> 
   <td align="center">const EdgeInsets.all(10.0)</td> 
   <td align="left">分页指示器与容器边框的距离</td> 
  </tr> 
  <tr> 
   <td align="left">builder</td> 
   <td align="center">SwiperPagination.dots</td> 
   <td align="left">目前已经定义了两个默认的分页指示器样式：&nbsp;<code>SwiperPagination.dots</code>&nbsp;、&nbsp;<code>SwiperPagination.fraction</code>，都可以做进一步的自定义.</td> 
  </tr> 
 </tbody> 
</table>

案例：

pubspec.yaml

flutter\_swiper: ^1.1.6

Swiper.dart

import 'package:flutter/material.dart';
    import 'package:flutter_swiper/flutter_swiper.dart';
    
    class SwiperPage extends StatefulWidget {
      SwiperPage({Key key}) : super(key: key);
    
      _SwiperPageState createState() => _SwiperPageState();
    }
    
    class _SwiperPageState extends State<SwiperPage> {
      List<Map> imgList = [
        {
          "url": "https://www.itying.com/images/flutter/1.png"},
        {
          "url": "https://www.itying.com/images/flutter/2.png"},
        {
          "url": "https://www.itying.com/images/flutter/3.png"}
      ];
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('轮播图组件演示'),
          ),
          body: Column(
            children: <Widget>[
              Container(
                width: double.infinity,
                // height: 150,
                child: AspectRatio(
                  aspectRatio: 16 / 9,
                  child: Swiper(
                    itemBuilder: (BuildContext context, int index) {
                      return new Image.network(
                        imgList[index]['url'],
                        fit: BoxFit.fill,
                      );
                    },
                    itemCount: imgList.length,
                    pagination: new SwiperPagination(),
                    loop: true,
                    autoplay: true,
                    // control: new SwiperControl(),
                  ),
                ),
              )
            ],
          ),
        );
      }
    }

转载于:https://www.cnblogs.com/yiweiyihang/p/11546622.html

[https_github.com_best-flutter_flutter_swiper_blob_master_README-ZH.md]: https://github.com/best-flutter/flutter_swiper/blob/master/README-ZH.md