Flutter轮播图插件carousel_nerdzlab的使用

该插件提供了自定义实现的CenteredPageView小部件，其行为类似于默认的PageView，但在居中的元素上设置padEnds: false，并可选地带有点指示器。

区别

CenteredPageView。项目会吸附到居中的位置。

默认PageView。元素根据滚动位置对齐，但不会居中。

特性

• CenteredPageView小部件，可以在保持默认PageView属性的同时居中元素。
• 可选的点指示器可以放置在CenteredPageView下方。

使用方法

以下是如何在你的Flutter应用中实现CenteredPageView：

CenteredPageView.builder(
  itemCount: 9, // 设置要显示的页面数量
  controller: PageController(viewportFraction: 0.8), // 控制器用于设置视口比例
  showIndicator: true, // 设置为'false'如果不希望显示点指示器
  indicatorStyle: const IndicatorStyle(
      indicatorWidth: 100, unselectedSize: Size(8, 8)), // 自定义点指示器样式
  itemBuilder: (context, index) => Container(
      width: MediaQuery.of(context).size.width, // 宽度设置为屏幕宽度
      margin: const EdgeInsets.symmetric(horizontal: 5.0), // 水平边距
      padding: const EdgeInsets.symmetric(horizontal: 16), // 内边距
      decoration: const BoxDecoration(color: Colors.amber), // 背景色
      child: Align(
        child: Text(
          'Page $index', // 文本显示当前页码
          style: const TextStyle(fontSize: 16.0), // 字体大小
        ),
      )),
),

自定义点指示器

• showIndicator 属性是一个布尔值，控制点指示器的可见性。
• indicatorStyle 属性允许你自定义点指示器的外观。

示例代码

以下是完整的示例代码，展示了如何在Flutter应用中使用carousel_nerdzlab插件。

import 'package:carousel_nerdzlab/carousel_nerdzlab.dart'; // 导入插件
import 'package:flutter/material.dart'; // 导入Flutter框架

void main() {
  runApp(const MainApp()); // 启动应用
}

class MainApp extends StatelessWidget { // 主应用类
  const MainApp({super.key}); // 构造函数

  [@override](/user/override)
  Widget build(BuildContext context) { // 构建UI
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white, // 背景色
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center, // 垂直居中对齐
          children: [
            SizedBox(
              height: 200, // 高度
              child: PageView.builder(
                itemCount: 9, // 页面数量
                physics: const BouncingScrollPhysics(), // 滚动效果
                controller: PageController(viewportFraction: 0.8), // 控制器
                padEnds: false, // 不填充两端
                itemBuilder: (context, index) => Container(
                    width: MediaQuery.of(context).size.width, // 宽度
                    margin: const EdgeInsets.symmetric(horizontal: 5.0), // 水平边距
                    padding: const EdgeInsets.symmetric(horizontal: 16), // 内边距
                    decoration: const BoxDecoration(color: Colors.amber), // 背景色
                    child: Align(
                      child: Text(
                        'Page $index', // 文本
                        style: const TextStyle(fontSize: 16.0), // 字体大小
                      ),
                    )),
              ),
            ),
            const SizedBox(height: 100), // 空白高度
            SizedBox(
              height: 200, // 高度
              child: CenteredPageView.builder(
                itemCount: 9, // 页面数量
                physics: const BouncingScrollPhysics(), // 滚动效果
                controller: PageController(viewportFraction: 0.8), // 控制器
                indicatorStyle: const IndicatorStyle(
                    indicatorWidth: 100, unselectedSize: Size(8, 8)), // 点指示器样式
                itemBuilder: (context, index) => Container(
                    width: MediaQuery.of(context).size.width, // 宽度
                    margin: const EdgeInsets.symmetric(horizontal: 5.0), // 水平边距
                    padding: const EdgeInsets.symmetric(horizontal: 16), // 内边距
                    decoration: const BoxDecoration(color: Colors.amber), // 背景色
                    child: Align(
                      child: Text(
                        'Page $index', // 文本
                        style: const TextStyle(fontSize: 16.0), // 字体大小
                      ),
                    )),
              ),
            ),
          ],
        ),
      ),
    );
  }
}