react-native - 我可以在 flutter 中获得与 React Native 中的 <TouchableOpacity/> 相同的效果吗？

Question

我发现在React Native中，使用组件时，按下相应的区域可以有不透明的效果。 在 flutter 中，我们当然可以使用 InkWell 小部件，但我不想要矩形或正方形。我们可以使用 flutter 实现相同的结果吗？干杯!

Answer 1

使用下面的代码:

import 'package:flutter/material.dart';

class TouchableOpacity extends StatefulWidget {
  final Widget child;
  final Function onTap;
  final Duration duration = const Duration(milliseconds: 50);
  final double opacity = 0.5;

  TouchableOpacity({@required this.child, this.onTap});

  @override
  _TouchableOpacityState createState() => _TouchableOpacityState();
}

class _TouchableOpacityState extends State<TouchableOpacity> {
  bool isDown;

  @override
  void initState() {
    super.initState();
    setState(() => isDown = false);
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (_) => setState(() => isDown = true),
      onTapUp: (_) => setState(() => isDown = false),
      onTapCancel: () => setState(() => isDown = false),
      onTap: widget.onTap,
      child: AnimatedOpacity(
        child: widget.child,
        duration: widget.duration,
        opacity: isDown ? widget.opacity : 1,
      ),
    );
  }
}

用法:

TouchableOpacity(
  child: ....
  onTap: () {....}
)