Flutter可翻转盒子组件插件flippable_box的使用

FlippableBox 是一个双面容器，它可以容纳两部分内容，并在翻转时自动调整大小以匹配其内容。以下是使用该插件的基本方法。

使用

首先，在你的类中导入该包：

import 'package:flippable_box/flippable_box.dart';

创建一个 FlippableBox，它包含两个子容器。通过更改 isFlipped 属性来触发内部的翻转动画。

GestureDetector(
    onTap: () => setState(() => _isFlipped = !_isFlipped),
    child: FlippableBox(
        front: Container(width: 200, height: 200, color: Colors.white),
        back: Container(width: 300, height: 300, color: Colors.white),
        isFlipped: _isFlipped,
    ),
)

注意：必须确保子部件是 Container 类型，并手动设置它们的大小或约束条件，如上例所示。这样做的目的是为了让盒子在动画过程中知道目标尺寸。

你可以通过以下属性控制翻转动画：

  • duration：设置动画持续时间。
  • curve：设置动画曲线。
  • flipVt：如果设置为 true，则翻转将沿垂直轴进行而不是水平轴。

你还可以指定一个 bg（接受 BoxDecoration）和 borderRadius，以便在需要时裁剪子部件的内容。

FlippableBox(
    front: child1,
    back: child2,
    isFlipped: _isFlipped,
    borderRadius: 32, // 使用 ClipRRect 裁剪子容器的内容
    bg: BoxDecoration(color: Colors.white), // 用共享背景绘制盒子本身
    duration: 0.5, // 半秒持续时间
    flipVt: true, // 垂直翻转而不是水平翻转
    curve: Curves.easeOut,
)

示例

可以在示例目录中查看一个简单的例子。

完整示例代码

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FlippableExample(),
    );
  }
}

class FlippableExample extends StatefulWidget {
  [@override](/user/override)
  _FlippableExampleState createState() => _FlippableExampleState();
}

class _FlippableExampleState extends State<FlippableExample> with SingleTickerProviderStateMixin {
  bool _isFlipped = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.blue.shade100,
        body: Center(
          child: GestureDetector(
            onTap: () => setState(() => _isFlipped = !_isFlipped),
            child: FlippableBox(
              front: _buildCard("Front!", 250, 200, Colors.green),
              back: _buildCard("Back...", 350, 350, Colors.red),
              flipVt: true,
              isFlipped: _isFlipped,
            ),
          ),
        ));
  }

  Widget _buildCard(String label, double width, double height, Color color) {
    return Container(
      color: color,
      width: width,
      height: height,
      child: Center(
        child: Text(label, style: TextStyle(fontSize: 32)),
      ),
    );
  }
}

更多关于Flutter可翻转盒子组件插件flippable_box的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter可翻转盒子组件插件flippable_box的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flippable_box 是一个用于 Flutter 的插件，它允许你创建一个可以翻转的盒子组件。这个插件非常适合用于创建卡片翻转、3D 翻转效果等交互式 UI 元素。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 flippable_box 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  flippable_box: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装插件。

使用 FlippableBox

FlippableBox 是一个可以包含两个子组件的容器，一个在前面，一个在后面。你可以通过点击或其他交互来翻转盒子，从而显示另一个子组件。

以下是一个简单的示例，展示如何使用 FlippableBox：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flippable Box Example'),
        ),
        body: Center(
          child: FlippableBox(
            front: Container(
              width: 200,
              height: 200,
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Front',
                  style: TextStyle(color: Colors.white, fontSize: 24),
                ),
              ),
            ),
            back: Container(
              width: 200,
              height: 200,
              color: Colors.red,
              child: Center(
                child: Text(
                  'Back',
                  style: TextStyle(color: Colors.white, fontSize: 24),
                ),
              ),
            ),
            duration: Duration(milliseconds: 500), // 翻转动画的持续时间
          ),
        ),
      ),
    );
  }
}

参数说明

  • front: 盒子前面的子组件。
  • back: 盒子后面的子组件。
  • duration: 翻转动画的持续时间。
  • controller: 一个 FlippableBoxController，用于控制盒子的翻转状态。
  • onFlip: 当盒子翻转时触发的回调函数。

使用 FlippableBoxController

你可以使用 FlippableBoxController 来控制盒子的翻转状态。例如，你可以通过编程方式翻转盒子，或者获取当前的翻转状态。

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final FlippableBoxController _controller = FlippableBoxController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flippable Box Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              FlippableBox(
                controller: _controller,
                front: Container(
                  width: 200,
                  height: 200,
                  color: Colors.blue,
                  child: Center(
                    child: Text(
                      'Front',
                      style: TextStyle(color: Colors.white, fontSize: 24),
                    ),
                  ),
                ),
                back: Container(
                  width: 200,
                  height: 200,
                  color: Colors.red,
                  child: Center(
                    child: Text(
                      'Back',
                      style: TextStyle(color: Colors.white, fontSize: 24),
                    ),
                  ),
                ),
                duration: Duration(milliseconds: 500),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  _controller.flip();
                },
                child: Text('Flip Box'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
回到顶部