Flutter中第三方轮播组件 flutter_swiper的使用

1.在pubspec.yaml中添加依赖

dependencies:
  flutter_swiper : ^1.1.6

点击connand+s  自动下载

2.导入第三方组件

import 'package:flutter_swiper/flutter_swiper.dart';

3.具体使用

main.dart

import 'package:flutter/material.dart';

import 'package:flutter_swiper/flutter_swiper.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  List<Map> imageList = [
    {
      "url":
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581401773519&di=efc809f404c42c8de28f7f829f1d0b51&imgtype=0&src=http%3A%2F%2F01.minipic.eastday.com%2F20170407%2F20170407003743_1f4967f106ba9dd87277f8d5969dc711_5.jpeg"
    },
    {
      "url":
          "https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2040389276,2611098741&fm=26&gp=0.jpg"
    },
    {
      "url":
          "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1629251846,4126644826&fm=26&gp=0.jpg"
    }
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        //标题栏
        appBar: AppBar(
          title: Text("Swiper Demo"),
        ),
        //内容区域
        body: Column(
          children: <Widget>[
            Container(
              //设置宽度100%
              width: double.infinity,
              child: AspectRatio(
                //设置图片宽高比为16:9
                aspectRatio: 16 / 9,
                child: new Swiper(
                  itemBuilder: (BuildContext context, int index) {
                    return new Image.network(
                      imageList[index]["url"],
                      fit: BoxFit.cover,
                    );
                  },
                  itemCount: this.imageList.length,
                  //配置指示器
                  pagination: new SwiperPagination(),
                  //配置左右箭头
                  //control: new SwiperControl(),
                ),
              ),
            ),
          ],
        ),
      ),
      //主题
      theme: ThemeData(primarySwatch: Colors.red),
    );
  }
}

实现效果:

更多使用参考github:https://github.com/zeke123/flutter_swiper

发布了272 篇原创文章 · 获赞 68 · 访问量 40万+

猜你喜欢

转载自blog.csdn.net/u014005316/article/details/104260703