Flutter- 涟漪效应

在Flutter， InkWell小部件用于在点击时执行波纹动画。这种效果对于遵循材料设计指南的所有应用程序组件来说都是常见的。涟漪动画最简单的术语可以理解为应用程序底部的黑色(默认)栏，当点击应用程序的各个组件时，它会显示一些数据。

让我们使用一个简单的应用程序更好地理解这些涟漪效应。要构建这样的应用程序，请按照以下步骤操作：

• 创建一个可以点击的简单小部件。
• 使用InkWell小部件在点击操作上添加回调。

让我们详细讨论它们。

创建一个简单的小部件：

让我们创建一个简单的小部件，它有一个可以使用以下代码点击的按钮：

Dart

Scaffold.of(context).showSnackBar(SnackBar(
      content: Text('Hello Geeks!'),
    ));
  },
  child: Container(
    padding: EdgeInsets.all(12.0),
    child: Text(' Button'),
  ),

使用 InkWell 小部件：

现在用InkWell小部件包装我们刚刚在上面创建的小部件，如下所示：

Dart

InkWell(
  onTap: () {
    Scaffold.of(context).showSnackBar(SnackBar(
      content: Text('Hello Geeks!'),
    ));
  },
  child: Container(
    padding: EdgeInsets.all(12.0),
    child: Text('Button'),
  ),
);

现在让我们从下面给出的源代码构建完整的应用程序。

完整的源代码：

Dart

import 'package:flutter/material.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'GeeksForGeeks';
  
    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),
        backgroundColor: Colors.green,
      ),
      body: Center(child: MyButton()),
    );
  }
}
  
class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        Scaffold.of(context).showSnackBar(SnackBar(
          content: Text('Hello Geeks!'),
        ));
      },
      child: Container(
        padding: EdgeInsets.all(12.0),
        color: Colors.green,
        child: Text(' Button'),
      ),
    );
  }
}

输出：

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?

单击此处前往由我们的专家精心策划的指南，旨在让您立即做好行业准备！