Flutter-圖片輪播flutter_swiper

Posted 2021-03-14 ssjf

pubspec.yaml

flutter_swiper: ^1.0.6    //请在pub上查看最新版本

使用

import ‘package:flutter/material.dart‘;
import ‘package:flutter_swiper/flutter_swiper.dart‘;

class AlbumPage extends StatefulWidget {
  @override
  AlbumPageState createState() {
    return AlbumPageState();
  }
}

class AlbumPageState extends State<AlbumPage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(‘轮播组件‘),
      ),
      body: Container(
          width: MediaQuery.of(context).size.width,
          height: 200.0,
          child: Swiper(
            itemBuilder: _swiperBuilder,
            itemCount: 3,
            pagination: SwiperPagination(
                builder: DotSwiperPaginationBuilder(
                  color: Colors.black54,
                  activeColor: Colors.white,
                )),
            control: SwiperControl(),
            scrollDirection: Axis.horizontal,
            autoplay: true,
            onTap: (index) => print(‘点击了第$index个‘),
          )),
    );
  }

  Widget _swiperBuilder(BuildContext context, int index) {
    return (Image.network(
      "http://via.placeholder.com/350x150",
      fit: BoxFit.fill,
    ));
  }
}

 

來源：https://blog.csdn.net/u011272795/article/details/82776861