28 Flutter 輪播圖 flutter_swiper

中文地址：

https://github.com/best-flutter/flutter_swiper/blob/master/README-ZH.md

基本參數

參數	默認值	描述
scrollDirection	Axis.horizontal	滾動方向，設置為Axis.vertical如果需要垂直滾動
loop	true	無限輪播模式開關
index	0	初始的時候下標位置
autoplay	false	自動播放開關.
onIndexChanged	void onIndexChanged(int index)	當用戶手動拖拽或者自動播放引起下標改變的時候調用
onTap	void onTap(int index)	當用戶點擊某個輪播的時候調用
duration	300.0	動畫時間，單位是毫秒
pagination	null	設置 new SwiperPagination() 展示默認分頁指示器
control	null	設置 new SwiperControl() 展示默認分頁按鈕

分頁指示器

分頁指示器繼承自 SwiperPlugin,SwiperPlugin 為 Swiper 提供額外的界面.設置為new SwiperPagination() 展示默認分頁.

參數	默認值	描述
alignment	Alignment.bottomCenter	如果要將分頁指示器放到其他位置，那么可以修改這個參數
margin	const EdgeInsets.all(10.0)	分頁指示器與容器邊框的距離
builder	SwiperPagination.dots	目前已經定義了兩個默認的分頁指示器樣式： SwiperPagination.dots 、 SwiperPagination.fraction，都可以做進一步的自定義.

 

 

案例：

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(),
              ),
            ),
          )
        ],
      ),
    );
  }
}