Flutter的轮播图

作者: 王俏 | 来源:发表于2019-07-26 09:52 被阅读0次

导入package

flutter_swiper: ^1.1.6

实现:

import 'package:flutter_swiper/flutter_swiper.dart';

class _MyHomePageState extends State<MyHomePage> {

  List _imageUrls = [

      'http://pages.ctrip.com/commerce/promote/20180718/yxzy/img/640sygd.jpg',

      'https://dimg04.c-ctrip.com/images/700u0r000000gxvb93E54_810_235_85.jpg',

      'https://dimg04.c-ctrip.com/images/700c10000000pdili7D8B_780_235_57.jpg'

  ];

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text(widget.title),

      ),

      body:  Column(

          mainAxisAlignment: MainAxisAlignment.center,

          children: <Widget>[

            Container(

              height: 160,

              child: Swiper(

                itemCount: _imageUrls.length,

                autoplay: true,

                itemBuilder: (BuildContext contex,int index){

                  return Image.network(

                  _imageUrls[index],

                  fit: BoxFit.fill);

                },

                pagination: SwiperPagination(),

        ),

      ),

      ],

    )

      // This trailing comma makes auto-formatting nicer for build methods.

    );

  }

}

相关文章

网友评论

    本文标题:Flutter的轮播图

    本文链接:https://www.haomeiwen.com/subject/qstrrctx.html