使用 Flutter 和 flip_widget 库的翻页效果

Question

我正在开发一个 flutter 应用程序，我正在尝试使用此插件实现翻转效果 Flip Widget。

该插件对于从右到左（下一页）的拖动效果效果很好，但我无法从左到右（上一页）实现相同的效果，我尝试了不同的倾斜度和百分比值（消极和积极）到目前为止没有任何效果。这是代码

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

import 'package:flutter/services.dart';
import 'package:flip_widget/flip_widget.dart';
import 'dart:math' as math;

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

const double _MinNumber = 0.008;
double _clampMin(double v) {
  if (v < _MinNumber && v > -_MinNumber) {
    if (v >= 0) {
      v = _MinNumber;
    } else {
      v = -_MinNumber;
    }
  }
  return v;
}

class _MyAppState extends State<MyApp> {
  GlobalKey<FlipWidgetState> _flipKey = GlobalKey();

  Offset _oldPosition = Offset.zero;
  bool _visible = true;

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

  @override
  Widget build(BuildContext context) {
    Size size = Size(256, 256);
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Visibility(
              child: Container(
                width: size.width,
                height: size.height,
                child: GestureDetector(
                  child: FlipWidget(
                    key: _flipKey,
                    textureSize: size * 2,
                    child: Container(
                      color: Colors.blue,
                      child: Center(
                        child: Text("hello"),
                      ),
                    ),
                  ),
                  onHorizontalDragStart: (details) {
                    _oldPosition = details.globalPosition;
                    _flipKey.currentState?.startFlip();
                  },
                  onHorizontalDragUpdate: (details) {
                    Offset off = details.globalPosition - _oldPosition;
                    double tilt = 1/_clampMin((-off.dy + 20) / 100);
                    double percent = math.max(0, -off.dx / size.width * 1.4);
                    percent = percent - percent / 2 * (1-1/tilt);
                    _flipKey.currentState?.flip(percent, tilt);
                  },
                  onHorizontalDragEnd: (details) {
                    _flipKey.currentState?.stopFlip();
                  },
                  onHorizontalDragCancel: () {
                    _flipKey.currentState?.stopFlip();
                  },
                ),
              ),
              visible: _visible,
            ),
            TextButton(
                onPressed: () {
                  setState(() {
                    _visible = !_visible;
                  });
                },
                child: Text("Toggle")
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

库开发人员响应了这个 Github 问题并为此功能提供了出色的示例代码。

https://github.com/gsioteam/flip_widget/issues/2

感谢您的出色工作@gsioteam

使用 Flutter 和 flip_widget 库的翻页效果

Flip page effect using Flutter and flip_widget library

flip

dart

flutter