Flutter红绿立体视觉效果插件anaglyph的使用

解锁3D的强大功能，借助anaglyph插件，您可以创建令人惊叹的应用程序，让您的用户大开眼界！

无论在哪个平台上使用，anaglyph插件都能无缝兼容，并且能在任何类型的彩色显示器上展示其魔力。

借助这个强大的插件，您可以轻松地将普通的2D小部件转换为沉浸式的3D体验，这些体验可以通过红绿立体眼镜来欣赏。而且最好的是，您甚至不必购买立体眼镜——您可以在短时间内自己制作！

Nebula图像来源：NASA, ESA, CSA, 和 STScI

Anaglyph插件

什么是红绿立体视觉效果（Anaglyph）？

红绿立体视觉效果（Anaglyph 3D）是一种通过滤镜编码每只眼睛的图像以达到立体视觉效果的方法，通常使用红色和青色滤镜。红绿立体视觉效果图像包含两个不同颜色过滤后的图像，每个图像对应一只眼睛。当通过“色码”的“立体眼镜”观看时，每只眼睛会看到相应的图像，从而形成一个集成的立体图像。大脑的视觉皮层将这些融合成三维场景或构图的感知。

换句话说，红绿立体视觉效果方法是一种简单且经济的方式创建3D体验。对于那些寻求简单且经济的方式来创建3D图像的人来说，这是一个完美的选择。

特性

• 轻松将几乎任何小部件转换为令人惊叹的3D红绿立体版本。
• 可以调整3D深度以定制视觉体验。
• 使用内置动画平滑应用更改。

快速入门指南

• 使用AnaglyphView创建3D外观。
• 使用AnaglyphStyle为子树设置默认的红绿立体样式。
• 使用AnimatedAnaglyphStyle应用带有自定义动画的红绿立体样式变化。

基本用法

AnaglyphView(
    depth: -7, // 控制3D效果的深度
    child: Image.network(
        'https://www.nasa.gov/sites/default/files/thumbnails/image/pillars_of_creation.jpg', // 网络上的图片
    ),
),

特殊场景

透明背景

如果您想在具有透明背景的小部件（例如Text, Icon, FlutterLogo）中使用AnaglyphView，请确保clipOuters为false：

AnaglyphView(
    depth: -4, // 控制3D效果的深度
    clipOuters: false, // 不裁剪外边距
    child: FlutterLogo(size: 250), // 使用FlutterLogo小部件
),

捐赠

如果您喜欢这个插件，请慷慨捐赠！😄

完整示例

以下是一个完整的示例，展示了如何使用anaglyph插件创建一个简单的3D图像浏览应用。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:anaglyph/anaglyph.dart';
import 'package:example/components/custom_scroll_behavior.dart';
import 'package:example/multi_widget.dart';
import 'package:example/components/arrow_button.dart';

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

class App extends StatefulWidget {
  const App({super.key});

  [@override](/user/override)
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  bool hasNegativeDepth = true;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      scrollBehavior: const CustomScrollBehavior(),
      title: 'Anaglyph Example',
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.grey[900],
        primarySwatch: Colors.grey,
      ),
      builder: (context, child) {
        return GestureDetector(
          onTap: () => setState(() => hasNegativeDepth = !hasNegativeDepth),
          child: child,
        );
      },
      home: AnimatedAnaglyphStyle(
        duration: const Duration(milliseconds: 900),
        curve: Curves.easeOutCubic,
        data: AnaglyphStyleData(
          clipOuters: true,
          depth: (hasNegativeDepth ? -1 : 1) * 7,
        ),
        child: const HomePage(),
      ),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final _pageController = PageController();
  static const _pageAnimationDuration = Duration(milliseconds: 600);
  static const _pageAnimationCurve = Curves.decelerate;

  [@override](/user/override)
  void initState() {
    SystemChrome.setSystemUIOverlayStyle(
      const SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarBrightness: Brightness.light,
        systemNavigationBarDividerColor: Colors.black87,
      ),
    );
    super.initState();
  }

  [@override](/user/override)
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: [
          Positioned.fill(
            child: PageView.builder(
              controller: _pageController,
              itemCount: 5,
              itemBuilder: (context, i) {
                return AnaglyphView(
                  child: Image.asset(
                    'assets/images/$i.png',
                    fit: BoxFit.contain,
                  ),
                );
              },
            ),
          ),
          if (MediaQuery.of(context).size.aspectRatio > 1.2) ...[
            ArrowButton(
              direction: ArrowDirection.left,
              onPressed: () {
                _pageController.previousPage(
                  duration: _pageAnimationDuration,
                  curve: _pageAnimationCurve,
                );
              },
            ),
            ArrowButton(
              direction: ArrowDirection.right,
              onPressed: () {
                _pageController.nextPage(
                  duration: _pageAnimationDuration,
                  curve: _pageAnimationCurve,
                );
              },
            ),
          ],
          Align(
            alignment: Alignment.bottomCenter,
            child: SafeArea(
              top: true,
              left: true,
              child: Padding(
                padding: const EdgeInsets.all(10),
                child: AnaglyphView(
                  depth: -1,
                  clipOuters: false,
                  child: ElevatedButton(
                    onPressed: () {
                      Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (context) => const MultiWidgetExample(),
                        ),
                      );
                    },
                    child: const Text('Multi-Widget Example'),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}