Flutter电视端轮播图插件flutter_swiper的使用

flutter_swiper

适用于 Flutter 的最佳轮播组件，支持多种布局，无限循环。兼容 Android 和 iOS。

新功能：分页布局

我们正在使用这个项目 flutter_page_indicator。

新功能：PageTransformer

现在我们有了类似于 Android 的 PageTransformer，只需将一个 transformer 设置到 Swiper 中， 它会返回一个已经变换过的组件。目前仅支持 DEFAULT 布局。 感谢 @FlutterRocks，你做得很好 👏。

我们正在使用这个项目 transformer_page_view。

新功能：布局

查看更多

展示

查看更多

路线图

查看

更新日志

查看

开始使用

• 安装
• 基本用法
• 构造函数
  • 基本
  • 分页
  • 控制按钮
  • 控制器
  • 自动播放
• 内置布局
• 代码示例

安装

在你的 pubspec.yaml 文件中添加：

flutter_swiper: ^latest_version

然后运行：

flutter packages get

在项目的根目录下执行上述命令。

基本用法

创建一个新的项目：

flutter create myapp

编辑 lib/main.dart 如下：

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Swiper(
        itemBuilder: (BuildContext context, int index) {
          return new Image.network(
            "http://via.placeholder.com/350x150",
            fit: BoxFit.fill,
          );
        },
        itemCount: 3,
        pagination: new SwiperPagination(),
        control: new SwiperControl(),
      ),
    );
  }
}

构造函数

基本

分页

分页继承自 SwiperPlugin，SwiperPlugin 为 Swiper 提供额外的 UI。设置 new SwiperPagination() 显示默认分页。

如果你想自定义自己的分页，你可以这样做：

new Swiper(
  ...,
  pagination: new SwiperCustomPagination(
    builder: (BuildContext context, SwiperPluginConfig config) {
      return new YourOwnPaginatipon();
    }
  )
);

控制按钮

控制也继承自 SwiperPlugin，设置 new SwiperControl() 显示默认控制按钮。

控制器

Controller 用于控制 Swiper 的索引，开始或停止自动播放。可以通过 new SwiperController() 创建一个控制器，并保存实例以便后续使用。

自动播放

内置布局

new Swiper(
  itemBuilder: (BuildContext context, int index) {
    return new Image.network(
      "http://via.placeholder.com/288x188",
      fit: BoxFit.fill,
    );
  },
  itemCount: 10,
  viewportFraction: 0.8,
  scale: 0.9,
)

new Swiper(
  itemBuilder: (BuildContext context, int index) {
    return new Image.network(
      "http://via.placeholder.com/288x188",
      fit: BoxFit.fill,
    );
  },
  itemCount: 10,
  itemWidth: 300.0,
  layout: SwiperLayout.STACK,
)

new Swiper(
    itemBuilder: (BuildContext context, int index) {
      return new Image.network(
        "http://via.placeholder.com/288x188",
        fit: BoxFit.fill,
      );
    },
    itemCount: 10,
    itemWidth: 300.0,
    itemHeight: 400.0,
    layout: SwiperLayout.TINDER,
 )

创建自定义动画非常简单：

new Swiper(
  layout: SwiperLayout.CUSTOM,
  customLayoutOption: new CustomLayoutOption(
      startIndex: -1,
      stateCount: 3
  ).addRotate([
    -45.0 / 180,
    0.0,
    45.0 / 180
  ]).addTranslate([
    new Offset(-370.0, -40.0),
    new Offset(0.0, 0.0),
    new Offset(370.0, -40.0)
  ]),
  itemWidth: 300.0,
  itemHeight: 200.0,
  itemBuilder: (context, index) {
    return new Container(
      color: Colors.grey,
      child: new Center(
        child: new Text("$index"),
      ),
    );
  },
  itemCount: 10
)

CustomLayoutOption 用于描述动画。很容易指定 Swiper 中每个项目的状态。

new CustomLayoutOption(
  startIndex: -1,  // 第一个项目的索引
  stateCount: 3    // 数组长度
).addRotate([        // 每个项目的旋转角度
  -45.0 / 180,
  0.0,
  45.0 / 180
]).addTranslate([           // 每个项目的偏移量
  new Offset(-370.0, -40.0),
  new Offset(0.0, 0.0),
  new Offset(370.0, -40.0)
])

代码示例

new ConstrainedBox(
  child: new Swiper(
    outer: false,
    itemBuilder: (c, i) {
      return new Wrap(
        runSpacing: 6.0,
        children: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) {
          return new SizedBox(
            width: MediaQuery.of(context).size.width / 5,
            child: new Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                new SizedBox(
                  child: new Container(
                    child: new Image.network(
                      "https://fuss10.elemecdn.com/c/db/d20d49e5029281b9b73db1c5ec6f9jpeg.jpeg%3FimageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90"
                    ),
                  ),
                  height: MediaQuery.of(context).size.width * 0.12,
                  width: MediaQuery.of(context).size.width * 0.12,
                ),
                new Padding(
                  padding: new EdgeInsets.only(top: 6.0),
                  child: new Text("$i"),
                )
              ],
            ),
          );
        }).toList(),
      );
    },
    pagination: new SwiperPagination(
      margin: new EdgeInsets.all(5.0)
    ),
    itemCount: 10,
  ),
  constraints: new BoxConstraints.loose(new Size(screenWidth, 170.0))
),