Flutter轮播图插件flutter_carousel_slider_plus的使用

发布于 1周前 作者 zlyuanteng 来自 Flutter

Flutter轮播图插件flutter_carousel_slider_plus的使用

插件简介

A carousel slider widget, Compatible with flutter 3.24.

特性

  • 无限滚动
  • 自定义子组件
  • 自动播放

支持平台

  • Flutter Android
  • Flutter iOS
  • Flutter Web
  • Flutter 桌面

安装

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

dependencies:
  carousel_slider_plus: ^0.0.1

然后导入该库：

import 'package:flutter_carousel_slider_plus/carousel_slider.dart';

如何使用

创建一个 CarouselSlider 小部件，并传递所需的参数：

CarouselSlider(
  options: CarouselOptions(height: 400.0),
  items: [1,2,3,4,5].map((i) {
    return Builder(
      builder: (BuildContext context) {
        return Container(
          width: MediaQuery.of(context).size.width,
          margin: EdgeInsets.symmetric(horizontal: 5.0),
          decoration: BoxDecoration(
            color: Colors.amber
          ),
          child: Text('text $i', style: TextStyle(fontSize: 16.0),)
        );
      },
    );
  }).toList(),
)

参数

CarouselSlider(
   items: items,
   options: CarouselOptions(
      height: 400,
      aspectRatio: 16/9,
      viewportFraction: 0.8,
      initialPage: 0,
      enableInfiniteScroll: true,
      reverse: false,
      autoPlay: true,
      autoPlayInterval: Duration(seconds: 3),
      autoPlayAnimationDuration: Duration(milliseconds: 800),
      autoPlayCurve: Curves.fastOutSlowIn,
      enlargeCenterPage: true,
      enlargeFactor: 0.3,
      onPageChanged: callbackFunction,
      scrollDirection: Axis.horizontal,
   )
 )

注意：如果传递了 height 参数，则 aspectRatio 参数将被忽略。

动态构建项目项小部件

这种方法通过仅在必要时构建项目来节省内存。这样可以确保在当前不可见的情况下不会构建它们。

CarouselSlider.builder(
  itemCount: 15,
  itemBuilder: (BuildContext context, int itemIndex, int pageViewIndex) =>
    Container(
      child: Text(itemIndex.toString()),
    ),
)

轮播控制器

为了手动控制页面视图的位置，你可以创建自己的 CarouselControllerSlider，并将其传递给 CarouselSlider。然后你可以使用 CarouselControllerSlider 实例来操作位置。

class CarouselDemo extends StatelessWidget {
  CarouselControllerSlider buttonCarouselController = CarouselControllerSlider();

 [@override](/user/override)
  Widget build(BuildContext context) => Column(
    children: <Widget>[
      CarouselSlider(
        items: child,
        carouselController: buttonCarouselController,
        options: CarouselOptions(
          autoPlay: false,
          enlargeCenterPage: true,
          viewportFraction: 0.9,
          aspectRatio: 2.0,
          initialPage: 2,
        ),
      ),
      ElevatedButton(
        onPressed: () => buttonCarouselController.nextPage(
            duration: Duration(milliseconds: 300), curve: Curves.linear),
        child: Text('→'),
      )
    ]
  );
}

更多关于Flutter轮播图插件flutter_carousel_slider_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter轮播图插件flutter_carousel_slider_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个使用Flutter轮播图插件flutter_carousel_slider_plus的示例代码。这个示例展示了如何在一个Flutter应用中集成并使用这个插件来创建一个简单的轮播图。

首先，确保你的pubspec.yaml文件中已经添加了flutter_carousel_slider_plus依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_carousel_slider_plus: ^x.y.z  # 请替换为最新版本号

然后，运行flutter pub get来安装依赖。

接下来，在你的Flutter应用中，你可以按照以下步骤使用flutter_carousel_slider_plus：

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

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

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

class MyHomePage extends StatelessWidget {
  final List<String> imageUrls = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Carousel Slider Plus Demo'),
      ),
      body: Center(
        child: CarouselSliderPlus.builder(
          itemCount: imageUrls.length,
          itemBuilder: (context, index, realIndex) {
            return ClipRRect(
              borderRadius: BorderRadius.circular(10.0),
              child: Image.network(
                imageUrls[index],
                fit: BoxFit.cover,
                width: double.infinity,
              ),
            );
          },
          options: CarouselOptions(
            height: 400.0,
            enlargeCenterPage: true,
            autoPlay: true,
            enlargeCenterPageScale: 1.2,
            autoPlayInterval: Duration(seconds: 3),
            autoPlayAnimationDuration: Duration(milliseconds: 800),
            autoPlayCurve: Curves.fastOutSlowIn,
            pauseAutoPlayOnTouch: true,
            enableInfiniteScroll: true,
            scrollDirection: Axis.horizontal,
          ),
        ),
      ),
    );
  }
}

代码解释

  1. 依赖导入：

    import 'package:flutter_carousel_slider_plus/flutter_carousel_slider_plus.dart';

  2. 数据准备：

    final List<String> imageUrls = [
  'https://example.com/image1.jpg',
  'https://example.com/image2.jpg',
  'https://example.com/image3.jpg',
];

  3. CarouselSliderPlus.builder：

    • itemCount：图片的数量。
    • itemBuilder：构建每个轮播项的Widget。这里使用ClipRRect和Image.network来显示网络图片。
    • options：配置轮播图的选项，如高度、是否自动播放、自动播放间隔等。

注意事项

  • 确保图片URL是有效的，并且服务器允许跨域访问。
  • 你可以根据需要调整CarouselOptions中的参数，以满足不同的需求。

这个示例展示了如何使用flutter_carousel_slider_plus来创建一个简单的轮播图。你可以根据需要进一步定制和扩展。

回到顶部