Могу ли я получить такой же эффект во флаттере, какв React Native?

Question

Я обнаружил, что в React Native при использовании компонента нажатие на соответствующую область может иметь эффект непрозрачности.Во флаттере мы можем использовать виджет InkWell, но мне не нужен прямоугольник или квадрат.Можем ли мы реализовать тот же результат, используя флаттер.Ура!

Answer 1

@ Шань Лю, вы правы, что InkWell имеет свой собственный эффект "всплеска", который делает упомянутый вами прямоугольник или квадрат.

Если вы не хотите этот эффект всплеска, используйте GestureDetector.

В приведенном ниже примере я поместил текст в GestureDetector, но вместо него вы можете поместить свой виджет:

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 2

Вот класс, который я создал.(Вы можете легко добавить прозрачность здесь)

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

Answer 3

Я думаю, вам нужно объединить детектор жестов и анимацию непрозрачности.Я не мог найти готовый пример.Но вот пример для анимации непрозрачности. Анимация непрозрачности флаттера