Flutter轮播标题插件title_carousel的使用

Flutter轮播标题插件title_carousel的使用

简介

title_carousel 是一个Flutter插件，用于创建带有轮播图像的组件。它可以使用网络或本地图片来实现多张图片的循环展示，并且可以为图片添加文本覆盖，根据图片的亮度自动调整文本颜色。

安装

要在项目中使用 title_carousel，首先需要在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  title_carousel: any

然后在 Dart 文件中导入该包：

import 'package:title_carousel/title_carousel.dart';

使用方法

基本用法

要添加一个 TitleCarousel 到你的项目中，可以在 widget 树中像使用其他 widget 一样使用它，并通过 CarouselImage 类提供图片。

TitleCarousel(
  images: [
    CarouselImage(image: "https://source.unsplash.com/b027q9eF3Yo.jpeg"),
    CarouselImage(image: "https://source.unsplash.com/6L-b2EmQ4gk.jpeg"),
    CarouselImage(image: "https://source.unsplash.com/6L-b2EmQ4gk.jpeg")
  ]
)

这将创建一个简单的轮播图，包含3张图片，图片会循环切换。

添加文本覆盖

你可以通过传递 TextProperties 类来为图片添加文本覆盖。TextProperties 类允许你根据图片的亮度自动调整文本颜色。

CarouselImage(
  image: "https://source.unsplash.com/b027q9eF3Yo.jpeg",
  titleOverlay: TextProperties(title: "Swan\n", computeLuminance: true),
  childrenTextOverlay: [
    TextProperties("An elegant swan swimming in the lake", computeLuminance: true)
  ]
)

• computeLuminance: true：启用根据图片亮度计算文本颜色的功能。
• brightColor 和 darkColor：可以自定义亮色和暗色文本的颜色。
• TextProperties 类还包含与 Text 组件相同的属性，因此你可以根据需要自定义文本样式。

自定义指示点

TitleCarousel 提供了 dotDecoration 参数，允许你自定义轮播图下方的指示点样式。你可以更改指示点的颜色、大小等属性。

TitleCarousel(
  images: [
    // 图片列表
  ],
  dotDecoration: DotDecoration(
    color: Colors.grey,          // 未选中的指示点颜色
    selectedColor: Colors.blue,  // 选中的指示点颜色
    size: Size(10, 10),          // 指示点大小
    selectedSize: Size(12, 12)   // 选中的指示点大小
  )
)

获取当前显示的图片

你可以通过给 TitleCarousel 分配一个 GlobalKey 来获取当前显示的图片。

GlobalKey<TitleCarouselState> carouselKey = GlobalKey();

// 在 widget 树中使用
TitleCarousel(key: carouselKey)

// 获取当前显示的图片
String getCurrentImage() {
  CarouselImage image = carouselKey.currentState?.getCurrentImage();
  return image?.image ?? '';
}

示例代码

以下是一个完整的示例代码，展示了如何在项目中使用 title_carousel 插件。这个示例包括两个页面：一个是不使用亮度计算的轮播图，另一个是使用亮度计算的轮播图。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Title Carousel Example',
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Title Carousel Example'),
      ),
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => NonLuminanceExample()),
                );
              },
              child: Text("Non Luminance Example"),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => LuminanceExample()),
                );
              },
              child: Text("Luminance Example"),
            ),
          ],
        ),
      ),
    );
  }
}

class NonLuminanceExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Non Luminance Example'),
      ),
      body: Center(
        child: TitleCarousel(
          images: [
            CarouselImage(image: "https://source.unsplash.com/b027q9eF3Yo.jpeg"),
            CarouselImage(image: "https://source.unsplash.com/6L-b2EmQ4gk.jpeg"),
            CarouselImage(image: "https://source.unsplash.com/6L-b2EmQ4gk.jpeg")
          ],
          dotDecoration: DotDecoration(
            color: Colors.grey,
            selectedColor: Colors.blue,
            size: Size(10, 10),
            selectedSize: Size(12, 12),
          ),
        ),
      ),
    );
  }
}

class LuminanceExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Luminance Example'),
      ),
      body: Center(
        child: TitleCarousel(
          images: [
            CarouselImage(
              image: "https://source.unsplash.com/b027q9eF3Yo.jpeg",
              titleOverlay: TextProperties(title: "Swan\n", computeLuminance: true),
              childrenTextOverlay: [
                TextProperties("An elegant swan swimming in the lake", computeLuminance: true)
              ],
            ),
            CarouselImage(
              image: "https://source.unsplash.com/6L-b2EmQ4gk.jpeg",
              titleOverlay: TextProperties(title: "Lake\n", computeLuminance: true),
              childrenTextOverlay: [
                TextProperties("A beautiful lake surrounded by mountains", computeLuminance: true)
              ],
            ),
          ],
          dotDecoration: DotDecoration(
            color: Colors.grey,
            selectedColor: Colors.blue,
            size: Size(10, 10),
            selectedSize: Size(12, 12),
          ),
        ),
      ),
    );
  }
}