Flutter UI组件插件visitime_ui的使用

Introduction

visitime_ui 是一个实验性的 Flutter UI 组件库，提供了独特的视觉效果和交互体验。它包含了一些自定义的 UI 组件，例如 WishGridView 和 ItineraryGridGallery，这些组件可以帮助开发者快速构建具有吸引力的用户界面。

安装

要使用 visitime_ui，首先需要将其添加到项目的 pubspec.yaml 文件中：

dependencies:
  visitime_ui: ^0.0.1

然后运行以下命令以安装依赖：

flutter pub get

使用示例

以下是一个完整的示例代码，展示如何在 Flutter 应用中使用 visitime_ui 提供的组件。

示例代码

import 'package:flutter/material.dart';
import 'package:visitime_ui/itinerary_grid_gallery.dart';
import 'package:visitime_ui/wish_grid_view.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 定义一组图片 URL
    final List<String> imageUrls = [
      'https://visitime.altralogica.it/assets/images/archeologia.svg',
      'https://visitime.altralogica.it/assets/images/cartolina.svg',
      'https://visitime.altralogica.it/assets/images/conoscere.svg',
      'https://visitime.altralogica.it/assets/images/design.svg',
      'https://visitime.altralogica.it/assets/images/dormire.svg',
      'https://visitime.altralogica.it/assets/images/enologia.svg',
      'https://visitime.altralogica.it/assets/images/enologia.svg',
      'https://visitime.altralogica.it/assets/images/enologia.svg',
      'https://visitime.altralogica.it/assets/images/enologia.svg',
      'https://visitime.altralogica.it/assets/images/enologia.svg',
      'https://visitime.altralogica.it/assets/images/enologia.svg',
      'https://visitime.altralogica.it/assets/images/famiglia.svg',
      'https://visitime.altralogica.it/assets/images/letteratura.svg',
      'https://visitime.altralogica.it/assets/images/mangiare.svg',
      'https://visitime.altralogica.it/assets/images/natura.svg',
      'https://visitime.altralogica.it/assets/images/religione.svg',
      'https://visitime.altralogica.it/assets/images/sagre.svg',
    ];

    // 定义一组旅行路线的图片 URL
    final List<String> itineraryUrls = [
      'https://visitime.altralogica.it/assets/images/Valtellina,_Italy_vineyard.jpg',
      'https://visitime.altralogica.it/assets/images/bianzone_vigneti.jpg',
      'https://visitime.altralogica.it/assets/images/dfce12362d.jpg',
      'https://visitime.altralogica.it/assets/images/133_12_7626_SentieroVal.jpg',
      'https://visitime.altralogica.it/assets/images/img-5271bis-c-800x660-4.jpg',
      'https://images.unsplash.com/photo-1527082395-e939b847da0d?q=80&w=2535&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    ];

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Visitime UI Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              // 使用 WishGridView 显示愿望网格视图
              Expanded(
                child: LayoutBuilder(
                  builder: (context, constraints) {
                    return WishGridView(
                      imageUrls: imageUrls,
                      maxWidth: constraints.maxWidth, // 设置最大宽度
                      bgColor: const Color.fromARGB(255, 0, 130, 40), // 背景颜色
                      fgColor: const Color.fromARGB(255, 250, 230, 21), // 前景色
                      borderRadius: 10, // 圆角半径
                      distinct: true, // 是否显示唯一图像
                    );
                  },
                ),
              ),
              const SizedBox(height: 1), // 添加间距
              // 使用 ItineraryGridGallery 显示旅行路线网格画廊
              Expanded(
                child: ItineraryGridGallery(
                  imageUrls: itineraryUrls,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}