我想将 AnimatedOpacity 设置为仅一部分，但它只会反映在终端子窗口小部件中

Question

我想创建一个在按下时显示边框的按钮。 但是，我想使用

AnimatedOpacity

控制边框是显示还是隐藏，但按钮本身变成了隐藏。 如何才能让按钮本身一直可见，但只能通过

AnimatedOpacity

控制边框？

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

class AppAnimatedButton extends HookWidget {
  const AppAnimatedButton({
    required double borderRadius,
    required Future<void> Function() onTap,
    bool? isSecondFlameBorder,
    super.key,
  })  : _borderRadius = borderRadius,
        _isSecondFlameBorder = isSecondFlameBorder ?? false,
        _onTap = onTap;

  final bool _isSecondFlameBorder;
  final double _borderRadius;
  final Future<void> Function() _onTap;

  @override
  Widget build(BuildContext context) {
    final isTapDowning = useState(false);
    const radius = 10.0;

    return GestureDetector(
      onTapCancel: () => isTapDowning.value = false,
      onTapDown: (_) => isTapDowning.value = true,
      onTapUp: (_) async {
        isTapDowning.value = false;
        _onTap();
      },
      child: AnimatedOpacity(
        opacity: isTapDowning.value ? 1 : 0,
        curve: Curves.easeIn,
        duration: const Duration(milliseconds: 400),
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(
              color: _isSecondFlameBorder && isTapDowning.value
                  ? Colors.blue
                  : Colors.transparent,
              width: 4,
            ),
            borderRadius: BorderRadius.circular(_borderRadius * 1.55),
          ),
          child: Container(
            width: 100,
            height: 100,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(radius),
              color: Colors.yellow,
            ),
          ),
        ),
      ),
    );
  }
}

作为参考，我想为亚马逊应用程序创建这样的动画。

Answer 1

您可以删除

AnimatedOpacity

小部件并将

Container

更改为

AnimatedContainer

。

return GestureDetector(
  // ...
  child: AnimatedContainer(
    curve: Curves.easeIn,
    duration: const Duration(milliseconds: 400),
    // ...
  ),
);