Flutter可滚动标题图片卡片插件scrollable_titled_image_cards的使用

Flutter可滚动标题图片卡片插件scrollable_titled_image_cards的使用

概述

ScrollableTitledImageCards 是一个用于滚动显示带标题图片卡片的 Flutter 包。用户可以自定义卡片上的标题和其他信息。

开始使用

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 scrollable_titled_image_cards 依赖：

dependencies:
  scrollable_titled_image_cards: ^0.0.1

2. 安装依赖

在命令行中运行以下命令以安装依赖：

$ flutter pub get

3. 导入包

在你的项目文件中导入该包：

import 'package:scrollable_titled_image_cards/scrollable_titled_image_cards.dart';

使用方法

水平滚动视图

ScrollableTitledImageCards(
  scrollDirection: Axis.horizontal, // 设置滚动方向为水平
  imagesList: imagesList, // 图片列表
  width: 250, // 卡片宽度
  height: 350, // 卡片高度
  onTap: (index) {
    print('$index pressed'); // 点击卡片时触发的回调函数
  },
  overlays: [
    for (var title in titlesList)
      // 自定义叠加层，例如标题
      Container(
        color: Colors.black.withOpacity(0.6), // 半透明背景
        constraints: const BoxConstraints.expand(), // 扩展到卡片大小
        child: Center(
          child: Text(
            title,
            style: const TextStyle(
              fontSize: 24,
              color: Colors.white,
              fontWeight: FontWeight.bold),
            ),
          ),
        )
      ],
    ),
  ],
)

垂直滚动视图

ScrollableTitledImageCards(
  imagesList: imagesList, // 图片列表
  width: double.infinity, // 卡片宽度
  height: 190, // 卡片高度
  onTap: (index) {
    print('$index pressed'); // 点击卡片时触发的回调函数
  },
),

类、参数和叠加选项

类：ScrollableTitledImageCards

叠加选项

示例代码

以下是完整的示例代码：

import 'package:flutter/material.dart';
import 'package:scrollable_titled_image_cards/scrollable_titled_image_cards.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(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomeScreen(),
    );
  }
}

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

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

  final List<String> titlesList = [
    'Title 1',
    'Title 2',
    'Title 3',
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Scrollable Titled Image Cards'),
      ),
      body: Column(
        children: [
          // 水平滚动视图
          ScrollableTitledImageCards(
            scrollDirection: Axis.horizontal,
            imagesList: imagesList,
            width: 250,
            height: 350,
            onTap: (index) {
              print('$index pressed');
            },
            overlays: [
              for (var title in titlesList)
                Container(
                  color: Colors.black.withOpacity(0.6),
                  constraints: const BoxConstraints.expand(),
                  child: Center(
                    child: Text(
                      title,
                      style: const TextStyle(
                        fontSize: 24,
                        color: Colors.white,
                        fontWeight: FontWeight.bold),
                      ),
                    ),
                  )
                ],
            ],
          ),
          // 垂直滚动视图
          ScrollableTitledImageCards(
            imagesList: imagesList,
            width: double.infinity,
            height: 190,
            onTap: (index) {
              print('$index pressed');
            },
          ),
        ],
      ),
    );
  }
}