Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
111 lines (89 sloc) 2.63 KB
title prev next
添加点按涟漪效果 (Material Design)
title path
获取文本框的输入值
/docs/cookbook/forms/retrieve-input
title path
捕获和处理点击动作
/docs/cookbook/gestures/handling-taps

Widgets that follow the Material Design guidelines display a ripple animation when tapped.

当我们在开发遵循 Material Design 规范应用的时候,我们可能会需要为某个 Widgets 的点击加入涟漪效果。

Flutter provides the InkWell widget to perform this effect. Create a ripple effect using the following steps:

Flutter 提供了 InkWell Widget 来实现这个功能。你可以通过以下步骤实现涟漪效果:

  1. Create a widget that supports tap.

    创建一个想要点击的 Widget

  2. Wrap it in an InkWell widget to manage tap callbacks and ripple animations.

    InkWell Widget 包裹它,并设置回调函数, 就可以显示涟漪动画了。

// The InkWell wraps the custom flat button widget.
InkWell(
  // When the user taps the button, show a snackbar.
  onTap: () {
    Scaffold.of(context).showSnackBar(SnackBar(
      content: Text('Tap'),
    ));
  },
  child: Container(
    padding: EdgeInsets.all(12.0),
    child: Text('Flat Button'),
  ),
);

Complete example

完整样例

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 StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // The InkWell wraps the custom flat button widget.
    return InkWell(
      // When the user taps the button, show a snackbar.
      onTap: () {
        Scaffold.of(context).showSnackBar(SnackBar(
          content: Text('Tap'),
        ));
      },
      child: Container(
        padding: EdgeInsets.all(12.0),
        child: Text('Flat Button'),
      ),
    );
  }
}

Ripples Demo{:.site-mobile-screenshot}

You can’t perform that action at this time.