美文网首页Flutter教学
Flutter(27):Material组件之SnackBar

Flutter(27):Material组件之SnackBar

作者: starryxp | 来源:发表于2020-10-01 12:23 被阅读0次

    Flutter教学目录持续更新中

    Github源代码持续更新中

    1.SnackBar介绍

    具有可选操作的轻量级消息提示,在屏幕的底部显示。

    2.SnackBar属性

    • content:内容
    • backgroundColor:背景色
    • elevation:阴影
    • shape:形状
    • behavior:位置
    • action:SnackBarAction
    • duration:显示时长
    • onVisible:显示回调

    3.SnackBar

    • 调用方法: Scaffold.of(context).showSnackBar()
    • 取消方法:Scaffold.of(context).removeCurrentSnackBar()
      需要注意的是这里的context跟BottomSheet一样需要基于Scaffold下的context


      1601480720(1).png
    class _SnackBarPageState extends State<SnackBarPage> {
      _showSnackBar(BuildContext context) {
        Scaffold.of(context).showSnackBar(
          SnackBar(
            content: Text('showSnackBar'),
            backgroundColor: Colors.black54,
            elevation: 10,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10),
            ),
            behavior: SnackBarBehavior.floating,
            action: SnackBarAction(
              label: '知道了',
              onPressed: () {
                Scaffold.of(context).removeCurrentSnackBar();
              },
            ),
            duration: Duration(seconds: 5),
            onVisible: () {
              print('onVisible');
            },
          ),
        );
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('SnackBar'),
          ),
          body: Builder(builder: (context) {
            return RaisedButton(
              onPressed: () {
                _showSnackBar(context);
              },
              child: Text('showSnackBar'),
            );
          }),
        );
      }
    }
    

    下一节:Material组件之Tooltip

    Flutter(28):Material组件之Tooltip

    Flutter教学目录持续更新中

    Github源代码持续更新中

    相关文章

      网友评论

        本文标题:Flutter(27):Material组件之SnackBar

        本文链接:https://www.haomeiwen.com/subject/tfcpuktx.html