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

debugcn 发表于 Dev

Shan Liu

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

富川

@Shan Liu 你是对的，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),
      ),
    );
  }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。