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