flutter 轮播图组件

 

Flutter 轮播图组件链接

// 这是Flutter的轮播图组件的地址，可以点击下方链接进行访问
https://pub.dev/packages/flutter_swiper

导入轮播图组件包

// 使用import语句导入flutter_swiper轮播图组件和Flutter的基础UI库
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

SwiperPage组件定义

// 定义SwiperPage组件，这是一个有状态的组件
class SwiperPage extends StatefulWidget {
    SwiperPage({Key key}) : super(key: key);
    _SwiperPageState createState() => _SwiperPageState();
}

轮播组件案例 代码实现

// 这是_SwiperPageState状态类的定义部分，它保存了三个图片的URL，并在build方法中显示这些图片
class _SwiperPageState extends State<SwiperPage> {
    // 定义了一个list，其中包含三个图片的URL地址
    List<Map> list = [
        {"url":"https://www.itying.com/images/flutter/1.png"},
        {"url":"https://www.itying.com/images/flutter/2.png"},
        {"url":"https://www.itying.com/images/flutter/3.png"}
    ];

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('轮播图组件演示'),
            ),
            body: Column(
                children: <Widget>[
                    Container(
                        width: double.infinity,
                        child: AspectRatio(
                            aspectRatio: 16/9,
                            child: new Swiper(
                                itemBuilder: (BuildContext context, int index) {
                                    return new Image.network(
                                        this.list[index]["url"],
                                        fit: BoxFit.fill,
                                    );
                                },
                                itemCount: list.length,
                                pagination: new SwiperPagination(),
                                autoplay: true,
                                // control: new SwiperControl(),
                            ),
                        ),
                    )
                ],
            ),
        );
    }
}