Fluttermoebooru插件的动漫图片浏览功能使用

简介

此简单库旨在为基于Moebooru的图像板提供一种易于使用的解决方案。

特性

• 获取帖子
• 创建帖子

开始使用

首先，在您的项目中添加moebooru插件：

dart pub add moebooru

使用示例

以下是一个完整的示例，展示如何使用Fluttermoebooru插件来浏览动漫图片。

完整示例代码

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AnimeImageBrowser(),
    );
  }
}

class AnimeImageBrowser extends StatefulWidget {
  @override
  _AnimeImageBrowserState createState() => _AnimeImageBrowserState();
}

class _AnimeImageBrowserState extends State<AnimeImageBrowser> {
  // 初始化Moebooru客户端
  final client = MoebooruClient('https://safebooru.org'); // 替换为您要使用的Moebooru站点URL

  List<Post> _posts = [];
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    fetchPosts();
  }

  // 获取帖子数据
  Future<void> fetchPosts() async {
    try {
      final posts = await client.getPosts(tags: 'anime', limit: 20); // 搜索包含“anime”标签的图片
      setState(() {
        _posts = posts;
        _isLoading = false;
      });
    } catch (e) {
      print('Error fetching posts: $e');
      setState(() {
        _isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('动漫图片浏览器'),
      ),
      body: _isLoading
          ? Center(child: CircularProgressIndicator())
          : GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
              ),
              itemCount: _posts.length,
              itemBuilder: (context, index) {
                final post = _posts[index];
                return GestureDetector(
                  onTap: () {
                    // 点击图片时打开大图预览
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => ImageViewer(post: post),
                      ),
                    );
                  },
                  child: Image.network(
                    post.fileUrl,
                    fit: BoxFit.cover,
                  ),
                );
              },
            ),
    );
  }
}

// 图片预览页面
class ImageViewer extends StatelessWidget {
  final Post post;

  const ImageViewer({required this.post});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('图片预览'),
      ),
      body: Center(
        child: Hero(
          tag: post.id.toString(),
          child: Image.network(
            post.fileUrl,
            fit: BoxFit.contain,
          ),
        ),
      ),
    );
  }
}

代码说明

1. 初始化客户端：

   final client = MoebooruClient('https://safebooru.org');
   

   这里我们初始化了一个MoebooruClient对象，并传入目标Moebooru站点的URL。您可以根据需要替换为您想要使用的站点。

2. 获取帖子数据：

   final posts = await client.getPosts(tags: 'anime', limit: 20);
   

   使用getPosts方法获取包含特定标签（如anime）的图片列表。这里限制了返回的结果数量为20个。

3. 显示图片网格：

   GridView.builder(
     gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
     itemCount: _posts.length,
     itemBuilder: (context, index) {
       final post = _posts[index];
       return GestureDetector(
         onTap: () {
           Navigator.push(
             context,
             MaterialPageRoute(builder: (context) => ImageViewer(post: post)),
           );
         },
         child: Image.network(post.fileUrl, fit: BoxFit.cover),
       );
     },
   )
   

   使用GridView.builder构建一个3列的网格布局，每个网格项显示一张图片。点击图片时会导航到ImageViewer页面以查看大图。

4. 图片预览页面：

   class ImageViewer extends StatelessWidget {
     final Post post;
   
     const ImageViewer({required this.post});
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(title: Text('图片预览')),
         body: Center(
           child: Hero(
             tag: post.id.toString(),
             child: Image.network(post.fileUrl, fit: BoxFit.contain),
           ),
         ),
       );
     }
   }