Flutter图片轮播插件flexi_image_slider的使用

Flutter图片轮播插件flexi_image_slider的使用

flexi_image_slider 是一个支持自动滚动和点状指示器的图片轮播插件。

效果图

特性

• 可以设置图片的宽高比
• 支持自动滚动

安装

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flexi_image_slider: 1.0.8

然后运行 flutter pub get 命令来安装插件。

使用方法

首先，你需要导入插件：

import 'package:flexi_image_slider/flexi_image_slider.dart';

接下来，你可以使用 flexi_image_slider 插件来创建图片轮播组件。以下是一个完整的示例：

// 必填字段

aspectRatio: 设置滑块的高度比例，例如 1.0, 1.5, 2.0 等
arrayImages: 传递包含图片 URL 的 List<String> 类型数组

// 可选字段 ------------

autoScroll: 启用或禁用自动滚动，默认为 true
viewportFraction: 设置值在 0.5 到 0.9 之间，用于显示左右两侧的预览图片
boxFit: 设置图像的内容模式
indicatorPosition: 设置指示器的位置，如 none, over slider 或 display at bottom of slider
indicatorAlignment: 设置指示器的位置，如 left, right 或 center
duration: 设置滑块切换图片的速度
indicatorActiveColor: 设置活动指示器的颜色
indicatorDeactiveColor: 设置非活动指示器的颜色
borderRadius: 设置图片的圆角半径
onTap: 当点击图片时执行的操作

以下是完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flexi Image Slider'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> arrayImages = [
    "https://rukminim2.flixcart.com/image/832/832/xif0q/t-shirt/5/9/6/m-all-rbc-white-one-nb-nicky-boy-original-imagpycw749kqzdz.jpeg?q=70",
    "https://rukminim2.flixcart.com/image/832/832/xif0q/t-shirt/w/8/l/l-all-rbc-white-one-nb-nicky-boy-original-imagpyct8f5hhauz.jpeg?q=70",
    "https://rukminim2.flixcart.com/image/832/832/xif0q/t-shirt/4/2/c/s-all-rbc-one-nb-nicky-boy-original-imagpycxgmnxretx.jpeg?q=70",
    "https://rukminim2.flixcart.com/image/832/832/xif0q/t-shirt/8/3/7/l-all-rbc-white-one-nb-nicky-boy-original-imagpycbphvjfmk4.jpeg?q=70"
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.only(left: 10, right: 10),
        child: flexi_image_slider(
          // 必填字段 ---------

          context: context,
          aspectRatio: 16 / 14,
          arrayImages: arrayImages,

          // 可选字段 ------------

          autoScroll: true,
          viewportFraction: 1.0,
          boxFit: BoxFit.fill,
          indicatorPosition: IndicatorPosition.overImage, // IndicatorPosition.afterImage, IndicatorPosition.overImage, IndicatorPosition.none
          indicatorAlignment: IndicatorAlignment.left, // IndicatorAlignment.left, IndicatorAlignment.right, IndicatorAlignment.center
          duration: const Duration(seconds: 4),
          indicatorActiveColor: Colors.blue,
          indicatorDeactiveColor: Colors.grey,
          borderRadius: 0,
          onTap: (int index) {
            print("$index index clicked");
            // 处理点击事件
          },
        ),
      ),
    );
  }
}