动画实用教程 | 通过 SnackBar 为用户提供更好的提醒

在某些情况下,我们需要用方便且友好的方式告诉用户发生了什么。例如,当用户滑动删除列表中的一条消息时,我们或许想提醒用户消息已经被删除了,或者除了提醒之外,我们还可以提供一个撤销的操作。

在 Material Design 中,用一个 SnackBar 就可以实现这个需求。请参见以下步骤:

步骤

  1. 创建一个 Scaffold

  2. 显示一个 Scaffold

  3. 提供一个附加的操作

1. 创建一个 Scaffold

在创建遵循 Material Design 设计规范的应用时,我们希望应用可以有一个一致的视觉层次结构。当我们在屏幕的底部显示一个 SnackBar 时,不能覆盖其他重要的 widgets,比如 FloatingActionButton

用 material library 中的 Scaffold widget 就可以创建一个一致的视觉层次结构,并且可以确保其他重要的 widgets 不会被覆盖。

Scaffold(

  appBar: AppBar(

    title: Text('SnackBar Demo'),

  ),

  body: SnackBarPage(), // Complete this code in the next step.

);

2. 显示一个 SnackBar

有了 Scaffold,我们就可以显示一个 SnackBar 了。首先,我们需要先创建一个 SnackBar ,然后使用 Scaffold 来显示它。

final snackBar = SnackBar(content: Text('Yay! A SnackBar!'));

// Find the Scaffold in the widget tree and use it to show a SnackBar.

Scaffold.of(context).showSnackBar(snackBar);

3. 提供一个附加的操作

在某些情况下,我们可能想在显示 SnackBar 的时候给用户提供一个附加的操作。比如,当他们意外的删除了一个消息,我们可以提供一个撤销更改的操作。

这个例子里,我们在创建 SnackBar widget 的时候提供一个附加的 action 参数。

final snackBar = SnackBar(

  content: Text('Yay! A SnackBar!'),

  action: SnackBarAction(

    label: 'Undo',

    onPressed: () {

      // Some code to undo the change.

    },

  ),

);

完整样例

备忘 注意: 这个例子是当用户点击一个按钮的时候显示一个 SnackBar。更多有关处理用户输入的信息,请查阅实用教程 (Cookbook) 的 Gestures 部分。

实用教程链接:Flutter手势

import 'package:flutter/material.dart';

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

class SnackBarDemo extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'SnackBar Demo',

      home: Scaffold(

        appBar: AppBar(

          title: Text('SnackBar Demo'),

        ),

        body: SnackBarPage(),

      ),

    );

  }

}

class SnackBarPage extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Center(

      child: RaisedButton(

        onPressed: () {

          final snackBar = SnackBar(

            content: Text('Yay! A SnackBar!'),

            action: SnackBarAction(

              label: 'Undo',

              onPressed: () {

                // Some code to undo the change.

              },

            ),

          );

          // Find the Scaffold in the widget tree and use

          // it to show a SnackBar.

          Scaffold.of(context).showSnackBar(snackBar);

        },

        child: Text('Show SnackBar'),

      ),

    );

  }

}

本文版权归扣丁书屋所有,转载请保留此说明。


所属标签

无标签

官方入门指南

Flutter官方发布的入门指导,包括了如何在不同的平台(Windows, Mac, Linux)上搭建开发环境,以及一些入门级的指导,以便您从零开始进入Flutter的世界,同时,一些Flutter的框架API,也是您开发时必不可少的工具书。

从这里进入