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自定义指令 directive
    Vue过滤器 filters
    贪心
    家庭作业
    线段
    数列极差
    shell
    智力大冲浪
    加工生产调度
    喷水装置
  • 原文地址:https://www.cnblogs.com/pp-pping/p/12222390.html
Copyright © 2011-2022 走看看