Question

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

Answer 1

使用以下代码：

val color = arrayOf<ColorDrawable>(ColorDrawable(Color.WHITE), ColorDrawable(getColor(R.color.myColor)))
val trans = TransitionDrawable(color)
quiz_rispsta_uno_button.background = trans
trans.startTransition(500)

用法：

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,
      ),
    );
  }
}

Answer 2

我认为您需要将手势检测器和不透明度动画结合起来。我找不到现成的示例。但是这是不透明度动画的示例。 Flutter opacity animation

Answer 3

@刘刘，您说得对，InkWell具有自己的“飞溅”效果，可以使您提到的矩形或正方形。

如果您不想那种飞溅效果，请使用GestureDetector。

在下面的示例中，我在GestureDetector中放置了一个Text，但是您可以将小部件放在其中：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'InkWell Demo';

    return MaterialApp(
      title: title,
      home: MyHomePage(title: title),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(child: MyButton()),
    );
  }
}

class MyButton extends StatefulWidget {
  @override
  MyButtonState createState() {
    return MyButtonState();
  }
}

class MyButtonState extends State<MyButton> {
  bool isTappedDown = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
      },
      onTapDown: (tapDownDetails) {
        setState(() {
          isTappedDown = true;
        });
      },
      onTapUp: (tapUpDetails) {
        setState(() {
          isTappedDown = false;
        });
      },
      child: Text(
        'Flat Button',
        style: TextStyle(
            fontSize: 30,
            fontWeight: FontWeight.bold,
            color: isTappedDown ? Colors.black.withOpacity(0.5) : Colors.black),
      ),
    );
  }
}

Answer 4

这是我创建的一个可触摸的类。（您可以在此处轻松添加透明度）

class Touchable extends StatelessWidget {
  final Widget child;
  final Function() onPress;
  final double borderRadius;
  final double padding;

  const Touchable(
      {Key key, this.child, this.onPress, this.borderRadius, this.padding})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(borderRadius),
      child: Material(
        color: Colors.transparent,
        child: InkWell(
            child: Padding(
              padding: EdgeInsets.all(padding),
              child: child,
            ),
            onTap: this.onPress),
      ),
    );
  }
}

我能否在颤动中获得与React Native中的<touchableopacity>相同的效果？

4 个答案: