BounceDismissible幫助用戶

所以我們有一個 Dismissible 來確認/拒絕一個專案。但是，我們有一些用戶試圖點擊/點擊該專案。我們的 UX 團隊建議我們然后“彈跳”該專案以表明他們必須滑動（并顯示操作欄位）。但我沒有看到任何這樣做的選擇。

有人有什么建議嗎？我現在的代碼如下所示：

Dismissible(
  key: const ValueKey(0),
  direction: DismissDirection.horizontal,
  child: Container(
    margin: EdgeInsets.symmetric(horizontal: 3, vertical: 3),
    child: card(),
  ),
  confirmDismiss: (direction) async {
    var newStatus = direction == DismissDirection.startToEnd
        ? OkNokNvt.OK
        : OkNokNvt.NOK;

    _changeStatus(newStatus);
    return false;
  },
  background: ok(),
  secondaryBackground: nok(),
),

uj5u.com熱心網友回復：

這是我的最小示例，它可以滿足您的需求。

基本上，GestureDetector onTap回呼通過sin在_animation.value. 可以通過更改引數cyclesPerAnimation和來調整行為bounceOffset。

只需將您Dismissible的位置放在the 的位置，Container您就可以開始使用了。

environment:
  sdk: ">=2.12.0 <3.0.0"

import 'dart:math';

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  late final AnimationController _animation = AnimationController(
    vsync: this,
    duration: const Duration(milliseconds: 500),
  );

  Offset _bounceOffset(double animationValue) {
    const cyclesPerAnimation = 2;
    const bounceOffset = 10;
    return Offset(
      0,
      sin(animationValue * pi * 2 * cyclesPerAnimation) * bounceOffset,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Bouncing Widget Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AnimatedBuilder(
              animation: _animation,
              builder: (context, widget) => Transform.translate(
                offset: _bounceOffset(_animation.value),
                child: GestureDetector(
                  onTap: () {
                    _animation.reset();
                    _animation.forward();
                  },
                  child: Container(
                    color: Colors.grey,
                    height: 50,
                    width: 200,
                    child: const Center(child: Text('Tap to bounce')),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

uj5u.com熱心網友回復：

在Dismissable不seeem有這個功能。

相反，您可以使用

這是代碼：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Bouncing Widget Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Slidable(
              key: const Key('key'),
              actionPane: const SlidableDrawerActionPane(),
              actionExtentRatio: 0.25,
              child: Builder(
                builder: (context) => GestureDetector(
                  onTap: () {
                    Slidable.of(context)
                        ?.open(actionType: SlideActionType.primary);
                  },
                  child: Container(
                    color: Colors.grey,
                    height: 50,
                    child: const Center(child: Text('Tap me')),
                  ),
                ),
              ),
              actions: [
                IconSlideAction(
                  caption: 'Delete',
                  color: Colors.red,
                  icon: Icons.delete,
                  onTap: () => print('remove me from list'),
                ),
              ],
              dismissal: SlidableDismissal(
                onDismissed: (_) => print('remove me from list'),
                dragDismissible: true,
                child: const SlidableDrawerDismissal(),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

標籤：扑 镖 颤振布局 颤动动画

上一篇：Flutter庫不兼容

下一篇：Flutterpubget版本解決失敗