zoukankan      html  css  js  c++  java
  • flutter 轮播图

    代码:

    import 'package:flutter/material.dart';
    import '../service/service_method.dart';
    import 'package:flutter_swiper/flutter_swiper.dart';
    import 'dart:convert';
    class SwiperDemo extends StatelessWidget {
    const SwiperDemo({Key key}) : super(key: key);

    @override
    Widget build(BuildContext context) {
    return Container(
    child: FutureBuilder(//网络数据返回能很好的渲染控件
    future: getHomePageContent(),//网络返回的数据
    builder: (context,snapshot){
    if (snapshot.hasData) {//snapshot 相当于返回的数据
    var data = json.decode(snapshot.data.toString());
    List<Map> swiper = (data['data']['slides'] as List).cast();
    return Column(
    children: <Widget>[
    SwiperDiy(swiperDataList: swiper)
    ],
    );
    }else{
    return Center(
    child: Text('加载错误'),
    );
    }
    },
    ),
    );
    }
    }

    //轮播图
    class SwiperDiy extends StatelessWidget {
     
    final List swiperDataList;
    SwiperDiy({this.swiperDataList});//可以省去:super(key : key)
    @override
    Widget build(BuildContext context) {
    return Container(
    height: 200.0,
    child: Swiper(
    itemBuilder: (BuildContext context, int index){
    return Image.network("${swiperDataList[index]['image']}",fit: BoxFit.fill,);
    },
    itemCount: swiperDataList.length,
    pagination: SwiperPagination(),//下面的索引元素
    autoplay: true,
    ),
    );
    }
    }
    总结:

    轮播图控件 flutter_swiper

     

    先在pubspec.yaml导入flutter_swiper

    和 list 用法差不多

    Swiper(

    itemBuilder:(BuildContext context, int  index){

    return  xxx//xx是控件 一般是Image

    }

    itemCount : //个数

    pagination:SwiperPagination();//索引元素

    autoplay://是否自动滚动

    height://高度

    )

  • 相关阅读:
    数组方法延伸
    Vue基础知识之过滤器(四)
    Vue基础知识之vue-resource和axios(三)
    【正则】对RegExp执行typeof运算的结果
    【正则】所有的字符(总)
    学习正则有感by魔芋(命名问题)
    关于正则表达式(转)
    【15】ES6 for Humans: The Latest Standard of JavaScript: ES2015 and Beyond
    中国首届CSS开发者大会讲师照片
    拥有强大的自我驱动力是一种怎样的体验?
  • 原文地址:https://www.cnblogs.com/pp-pping/p/12222390.html
Copyright © 2011-2022 走看看