新贵 Flutter （11）snackbar

flutter

移动设配开始就是以通讯为主，以消息形式通知用户是比不可少的。当用户进行某种操作希望的到一定反馈，是否动作已经被执行了。例如我们可以通过侧滑删除消息列表中一条消息。然后在屏幕下方提示我们执行删除列表条目消息。

class SnackBarApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "Snack bar App",
      home: Scaffold(
        appBar: AppBar(
          title: Text("Snack Bar"),
        ),
        body: Center(
          child: Text("Snack Bar Demo"),
        ),
      ),
    );
  }
}

创建一个 SnackBarPage ，然后我们来实现 StatelessWidget 在中间放置一个按钮 RaiseButton 然后在 onPressed 中写函数创建一个 SnackBar，可以在其 content 添加组件来实现其中内容。

 body: SnackBarPage(),

class SnackBarPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: RaisedButton(onPressed: () {
        final snackBar = SnackBar(
          content: Text('hey a SnackBar'),

        );

        Scaffold.of(context).showSnackBar(snackBar);
      },child: Text("显示 SnackBar"),),
    );
  }
}

在 SnackBar 中通过在 action 为 SnackBar 添加一些动作，用起来很方便。可以通过定义 SnackBarAction 组件来定义动作。

final snackBar = SnackBar(
          content: Text('hey a SnackBar'),
          action: SnackBarAction(
            label: 'Undo',
            onPressed: () {
            },
          ),
        );

到今天感觉 Flutter 组件挺丰富的，设计也比较合理，开发起来的比较顺畅，dart 这门语言设计合理，有了 js 和 kotlin 的功底写起来 dart 应该是无感的。