当前位置：移动技术网 > IT编程>移动开发>Android > Flutter学习笔记（20）--FloatingActionButton、PopupMenuButton、SimpleDialog、AlertDialog、SnackBar

Flutter学习笔记（20）--FloatingActionButton、PopupMenuButton、SimpleDialog、AlertDialog、SnackBar

2019年08月21日 | 移动技术网IT编程 | 我要评论

海边发现奇石伸手触摸瞬间悲剧,女子监狱大揭秘,火影忍者全集国语高清

如需转载，请注明出处：flutter学习笔记（20）--floatingactionbutton、popupmenubutton、simpledialog、alertdialog、snackbar

floatingactionbutton

floatingactionbutton对应一个圆形图标按钮，悬停在内容之上，以展示对应程序中的主要动作，所以非常醒目，类似于ios系统里的小白点按钮。

floatingactionbutton组件属性及描述如下：

child：child一般为icon，不推荐使用文字
tooltip：按钮提示文字
foregroundcolor：前景色
backgroundcolor：背景色
elevation：未点击时阴影值，默认6.0
hignlightelevation：点击时阴影值
onpressed：点击事件回调
shape：定义按钮的shape，设置shape时，默认的elevation将会失效，默认为circleborder

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

void main() => runapp(demoapp());

class demoapp extends statelesswidget{
  @override
  widget build(buildcontext context) {
    // todo: implement build
    return new materialapp(
      title: 'floatingbutton demo',
      debugshowcheckedmodebanner: false,
      home: new scaffold(
        appbar: appbar(
          title: new text('floatingbutton demo'),
        ),
        drawer: drawer(
          child: listview(
            children: <widget>[
              useraccountsdrawerheader(
                  accountname: new text('floatingbutton demo'),
                  accountemail: new text('www.baidu.com'),
                  currentaccountpicture: new circleavatar(
                    backgroundimage: assetimage('images/user.jpeg'),
                  ),
              ),
              listtile(
                title: new text('我是主标题'),
                leading: icon(icons.add_circle_outline),
                subtitle: new text('我是副标题'),
              ),
              listtile(
                title: new text('我是主标题'),
                leading: icon(icons.add_circle_outline),
                subtitle: new text('我是副标题'),
              ),
              listtile(
                title: new text('我是主标题'),
                leading: icon(icons.add_circle_outline),
                subtitle: new text('我是副标题'),
              ),
              listtile(
                title: new text('我是主标题'),
                leading: icon(icons.add_circle_outline),
                subtitle: new text('我是副标题'),
              )
            ],
          ),
        ),
        floatingactionbutton: new builder(builder: (buildcontext context){
          return new floatingactionbutton(
              child: icon(icons.album),
              foregroundcolor: colors.amberaccent,
              backgroundcolor: colors.deeppurple,
              elevation: 10.0,
              highlightelevation: 20.0,
              mini: false,
              onpressed: (){
                scaffold.of(context).showsnackbar(new snackbar(content: new text('点击了floatingbutton')));
              }
          );
        }),
        floatingactionbuttonlocation: floatingactionbuttonlocation.centerfloat,
      ),
    );
  }

}

popupmenubutton

构造方法：

  const popupmenubutton({
    key key,
    @required this.itembuilder,//item子项，可以为任意类型
    this.initialvalue,//初始值
    this.onselected,//选中其中一项时回调
    this.oncanceled,//点击空白处，不选择时回调
    this.tooltip,//提示
    this.elevation = 8.0,//阴影大小
    this.padding = const edgeinsets.all(8.0),//padding
    this.child,
    this.icon,
    this.offset = offset.zero,
  }) : assert(itembuilder != null),
        assert(offset != null),
        assert(!(child != null && icon != null)), // fails if passed both parameters
        super(key: key);

demo示例：

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

void main() => runapp(demoapp());

class demoapp extends statelesswidget{
  @override
  widget build(buildcontext context) {
    // todo: implement build
    return new materialapp(
      title: 'floatingbutton demo',
      debugshowcheckedmodebanner: false,
      home: new scaffold(
        body: new center(
          child: _showpopupmenubutton(),
        ),
        appbar: appbar(
          title: new text('floatingbutton demo'),
        ),
        drawer: drawer(
          child: listview(
            children: <widget>[
              useraccountsdrawerheader(
                  accountname: new text('floatingbutton demo'),
                  accountemail: new text('www.baidu.com'),
                  currentaccountpicture: new circleavatar(
                    backgroundimage: assetimage('images/user.jpeg'),
                  ),
              ),
              listtile(
                title: new text('我是主标题'),
                leading: icon(icons.add_circle_outline),
                subtitle: new text('我是副标题'),
              ),
              listtile(
                title: new text('我是主标题'),
                leading: icon(icons.add_circle_outline),
                subtitle: new text('我是副标题'),
              ),
              listtile(
                title: new text('我是主标题'),
                leading: icon(icons.add_circle_outline),
                subtitle: new text('我是副标题'),
              ),
              listtile(
                title: new text('我是主标题'),
                leading: icon(icons.add_circle_outline),
                subtitle: new text('我是副标题'),
              )
            ],
          ),
        ),
        floatingactionbutton: new builder(builder: (buildcontext context){
          return new floatingactionbutton(
              child: icon(icons.album),
              foregroundcolor: colors.amberaccent,
              backgroundcolor: colors.deeppurple,
              elevation: 10.0,
              highlightelevation: 20.0,
              mini: false,
              onpressed: (){
              },
          );
        }),
        floatingactionbuttonlocation: floatingactionbuttonlocation.centerfloat,
      ),
    );
  }

  popupmenubutton _showpopupmenubutton() {
    return popupmenubutton(
      icon: icon(icons.menu),
        itembuilder: (buildcontext context) => <popupmenuentry>[
          const popupmenuitem(
            child: listtile(
              leading: icon(icons.add_circle_outline),
              title: text("popupmenubutton1"),
            ),
          ),
          const popupmenuitem(
            child: listtile(
              leading: icon(icons.add_circle_outline),
              title: text("popupmenubutton2"),
            ),
          ),
          const popupmenuitem(
            child: listtile(
              leading: icon(icons.add_circle_outline),
              title: text("popupmenubutton3"),
            ),
          ),
          const popupmenuitem(
            child: listtile(
              leading: icon(icons.add_circle_outline),
              title: text("popupmenubutton4"),
            ),
          ),
        ]
    );
  }
}

效果截图：

simpledialog

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

void main() => runapp(demoapp());

class demoapp extends statelesswidget{
  @override
  widget build(buildcontext context) {
    return new materialapp(
      title: 'floatingbutton demo',
      debugshowcheckedmodebanner: false,
      home: mhomepage(),
    );
  }
}

class mhomepage extends statefulwidget{
  @override
  state<statefulwidget> createstate() {
    // todo: implement createstate
    return _mhomepage();
  }
}

class _mhomepage extends state {
  @override
  widget build(buildcontext context) {
    // todo: implement build
    return new scaffold(
      body: new center(
        child: _showpopupmenubutton(),
      ),
      appbar: appbar(
        title: new text('floatingbutton demo'),
      ),
      drawer: drawer(
        child: listview(
          children: <widget>[
            useraccountsdrawerheader(
              accountname: new text('floatingbutton demo'),
              accountemail: new text('www.baidu.com'),
              currentaccountpicture: new circleavatar(
                backgroundimage: assetimage('images/user.jpeg'),
              ),
            ),
            listtile(
              title: new text('我是主标题'),
              leading: icon(icons.add_circle_outline),
              subtitle: new text('我是副标题'),
            ),
            listtile(
              title: new text('我是主标题'),
              leading: icon(icons.add_circle_outline),
              subtitle: new text('我是副标题'),
            ),
            listtile(
              title: new text('我是主标题'),
              leading: icon(icons.add_circle_outline),
              subtitle: new text('我是副标题'),
            ),
            listtile(
              title: new text('我是主标题'),
              leading: icon(icons.add_circle_outline),
              subtitle: new text('我是副标题'),
            )
          ],
        ),
      ),
      floatingactionbutton: new floatingactionbutton(
        child: icon(icons.album),
        foregroundcolor: colors.amberaccent,
        backgroundcolor: colors.deeppurple,
        elevation: 10.0,
        highlightelevation: 20.0,
        mini: false,
        onpressed: (){
            _showsimpledialog(context);
        },
      ),
      floatingactionbuttonlocation: floatingactionbuttonlocation.centerfloat,
    );
  }

  popupmenubutton _showpopupmenubutton() {
    return popupmenubutton(
        icon: icon(icons.menu),
        itembuilder: (buildcontext context) => <popupmenuentry>[
          const popupmenuitem(
            child: listtile(
              leading: icon(icons.add_circle_outline),
              title: text("popupmenubutton1"),
            ),
          ),
          const popupmenuitem(
            child: listtile(
              leading: icon(icons.add_circle_outline),
              title: text("popupmenubutton2"),
            ),
          ),
          const popupmenuitem(
            child: listtile(
              leading: icon(icons.add_circle_outline),
              title: text("popupmenubutton3"),
            ),
          ),
          const popupmenuitem(
            child: listtile(
              leading: icon(icons.add_circle_outline),
              title: text("popupmenubutton4"),
            ),
          ),
        ]
    );
  }

  void _showsimpledialog(buildcontext context) {
    showdialog(
        context: context,
        builder: (buildcontext context){
          return simpledialog(
            title: new text('simpledialog demo'),
            children: <widget>[
              simpledialogoption(
                child: text('选项1'),
              ),
              simpledialogoption(
                child: text('选项2'),
                onpressed: (){
                  navigator.pop(context);
                },
              ),
            ],
          );
        }
    );
  }
}

效果截图：

alertdialog

alertdialog常用属性：

  const alertdialog({
    key key,
    this.title,//对话框顶部提示文案
    this.titlepadding,
    this.titletextstyle,//对话框顶部提示文案字体样式
    this.content,//内容部分，对话框的提示内容，通常为文字
    this.contentpadding = const edgeinsets.fromltrb(24.0, 20.0, 24.0, 24.0),
    this.contenttextstyle,//对话框提示内容的字体样式
    this.actions,//对话框底部操作按钮
    this.backgroundcolor,//对话框背景色
    this.elevation,
    this.semanticlabel,
    this.shape,
  }) : assert(contentpadding != null),
       super(key: key);

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

void main() => runapp(demoapp());

class demoapp extends statelesswidget{
  @override
  widget build(buildcontext context) {
    return new materialapp(
      title: 'floatingbutton demo',
      debugshowcheckedmodebanner: false,
      home: mhomepage(),
    );
  }
}

class mhomepage extends statefulwidget{
  @override
  state<statefulwidget> createstate() {
    // todo: implement createstate
    return _mhomepage();
  }
}

class _mhomepage extends state {
  @override
  widget build(buildcontext context) {
    // todo: implement build
    return new scaffold(
      body: new center(
        child: _showpopupmenubutton(),
      ),
      appbar: appbar(
        title: new text('floatingbutton demo'),
      ),
      drawer: drawer(
        child: listview(
          children: <widget>[
            useraccountsdrawerheader(
              accountname: new text('floatingbutton demo'),
              accountemail: new text('www.baidu.com'),
              currentaccountpicture: new circleavatar(
                backgroundimage: assetimage('images/user.jpeg'),
              ),
            ),
            listtile(
              title: new text('我是主标题'),
              leading: icon(icons.add_circle_outline),
              subtitle: new text('我是副标题'),
            ),
            listtile(
              title: new text('我是主标题'),
              leading: icon(icons.add_circle_outline),
              subtitle: new text('我是副标题'),
            ),
            listtile(
              title: new text('我是主标题'),
              leading: icon(icons.add_circle_outline),
              subtitle: new text('我是副标题'),
            ),
            listtile(
              title: new text('我是主标题'),
              leading: icon(icons.add_circle_outline),
              subtitle: new text('我是副标题'),
            )
          ],
        ),
      ),
      floatingactionbutton: new floatingactionbutton(
        child: icon(icons.album),
        foregroundcolor: colors.amberaccent,
        backgroundcolor: colors.deeppurple,
        elevation: 10.0,
        highlightelevation: 20.0,
        mini: false,
        onpressed: (){
//            _showsimpledialog(context);
          _showalertdialog(context);
        },
      ),
      floatingactionbuttonlocation: floatingactionbuttonlocation.centerfloat,
    );
  }

  popupmenubutton _showpopupmenubutton() {
    return popupmenubutton(
        icon: icon(icons.menu),
        itembuilder: (buildcontext context) => <popupmenuentry>[
          const popupmenuitem(
            child: listtile(
              leading: icon(icons.add_circle_outline),
              title: text("popupmenubutton1"),
            ),
          ),
          const popupmenuitem(
            child: listtile(
              leading: icon(icons.add_circle_outline),
              title: text("popupmenubutton2"),
            ),
          ),
          const popupmenuitem(
            child: listtile(
              leading: icon(icons.add_circle_outline),
              title: text("popupmenubutton3"),
            ),
          ),
          const popupmenuitem(
            child: listtile(
              leading: icon(icons.add_circle_outline),
              title: text("popupmenubutton4"),
            ),
          ),
        ]
    );
  }

  void _showsimpledialog(buildcontext context) {
    showdialog(
        context: context,
        builder: (buildcontext context){
          return simpledialog(
            title: new text('simpledialog demo'),
            children: <widget>[
              simpledialogoption(
                child: text('选项1'),
              ),
              simpledialogoption(
                child: text('选项2'),
                onpressed: (){
                  navigator.pop(context);
                },
              ),
            ],
          );
        }
    );
  }

  void _showalertdialog(buildcontext context) {
    showdialog(
      context: context,
      builder: (buildcontext context){
        return alertdialog(
          title: new text('提示'),
          content: new text('这是提示框的内容'),
          actions: <widget>[
            flatbutton(onpressed: null, child: new text('确定'),disabledtextcolor: colors.blueaccent,),
            flatbutton(onpressed: null, child: new text('取消'),disabledcolor: colors.deeppurple,),
          ],
        );
      }
    );
  }
}

效果截图：

snackbar

snackbar是一个轻量级消息提示组件，在屏幕的底部显示，snackbar常用属性如下：

  const snackbar({
    key key,
    @required this.content,//提示内容
    this.backgroundcolor,//背景色
    this.action,
    this.duration = _ksnackbardisplayduration,//提示时常
    this.animation,//弹出动画
  }) : assert(content != null),
       assert(duration != null),
       super(key: key);

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

void main() => runapp(demoapp());

class demoapp extends statelesswidget{
  @override
  widget build(buildcontext context) {
    return new materialapp(
      title: 'floatingbutton demo',
      debugshowcheckedmodebanner: false,
      home: mhomepage(),
    );
  }
}

class mhomepage extends statefulwidget{
  @override
  state<statefulwidget> createstate() {
    // todo: implement createstate
    return _mhomepage();
  }
}

class _mhomepage extends state {
  @override
  widget build(buildcontext context) {
    // todo: implement build
    return new scaffold(
      body: new center(
        child: _showpopupmenubutton(),
      ),
      appbar: appbar(
        title: new text('floatingbutton demo'),
        actions: <widget>[
          iconbutton(icon: icon(icons.search), onpressed: (){
            scaffold.of(context).showsnackbar(new snackbar(content: new text('snackbar')));
          })
        ],
      ),
      drawer: drawer(
        child: listview(
          children: <widget>[
            useraccountsdrawerheader(
              accountname: new text('floatingbutton demo'),
              accountemail: new text('www.baidu.com'),
              currentaccountpicture: new circleavatar(
                backgroundimage: assetimage('images/user.jpeg'),
              ),
            ),
            listtile(
              title: new text('我是主标题'),
              leading: icon(icons.add_circle_outline),
              subtitle: new text('我是副标题'),
            ),
            listtile(
              title: new text('我是主标题'),
              leading: icon(icons.add_circle_outline),
              subtitle: new text('我是副标题'),
            ),
            listtile(
              title: new text('我是主标题'),
              leading: icon(icons.add_circle_outline),
              subtitle: new text('我是副标题'),
            ),
            listtile(
              title: new text('我是主标题'),
              leading: icon(icons.add_circle_outline),
              subtitle: new text('我是副标题'),
            )
          ],
        ),
      ),
      floatingactionbutton: new floatingactionbutton(
        child: icon(icons.album),
        foregroundcolor: colors.amberaccent,
        backgroundcolor: colors.deeppurple,
        elevation: 10.0,
        highlightelevation: 20.0,
        mini: false,
        onpressed: (){
//            _showsimpledialog(context);
          _showalertdialog(context);
        },
      ),
      floatingactionbuttonlocation: floatingactionbuttonlocation.centerfloat,
    );
  }

  popupmenubutton _showpopupmenubutton() {
    return popupmenubutton(
        icon: icon(icons.menu),
        itembuilder: (buildcontext context) => <popupmenuentry>[
          const popupmenuitem(
            child: listtile(
              leading: icon(icons.add_circle_outline),
              title: text("popupmenubutton1"),
            ),
          ),
          const popupmenuitem(
            child: listtile(
              leading: icon(icons.add_circle_outline),
              title: text("popupmenubutton2"),
            ),
          ),
          const popupmenuitem(
            child: listtile(
              leading: icon(icons.add_circle_outline),
              title: text("popupmenubutton3"),
            ),
          ),
          const popupmenuitem(
            child: listtile(
              leading: icon(icons.add_circle_outline),
              title: text("popupmenubutton4"),
            ),
          ),
        ]
    );
  }

  void _showsimpledialog(buildcontext context) {
    showdialog(
        context: context,
        builder: (buildcontext context){
          return simpledialog(
            title: new text('simpledialog demo'),
            children: <widget>[
              simpledialogoption(
                child: text('选项1'),
              ),
              simpledialogoption(
                child: text('选项2'),
                onpressed: (){
                  navigator.pop(context);
                },
              ),
            ],
          );
        }
    );
  }

  void _showalertdialog(buildcontext context) {
    showdialog(
      context: context,
      builder: (buildcontext context){
        return alertdialog(
          title: new text('提示'),
          content: new text('这是提示框的内容'),
          actions: <widget>[
            flatbutton(onpressed: null, child: new text('确定'),disabledtextcolor: colors.blueaccent,),
            flatbutton(
              onpressed: (){
                navigator.pop(context);
                scaffold.of(context).showsnackbar(new snackbar(content: new text('snackbar')));
              },
              child: new text('取消'),disabledcolor: colors.deeppurple,),
          ],
          backgroundcolor: colors.amberaccent,
        );
      }
    );
  }
}

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！点击进行留言回复

Android原生视频播放VideoView的使用

本文实例为大家分享了android原生视频播放videoview的具体代码，供大家参考，具体内容如下布局文件activity_video.xml<rela... [阅读全文]
Android apk 项目一键打包并上传到蒲公英的实现方法

项目一键打包并上传到蒲公英缘由:测试流程由打包找包准备上传填写更新信息然后上传过于复杂所以想要简化开发阅读须知:需要读者了解如何在项目里面建立... [阅读全文]
flutter的环境安装配置问题及解决方法

flutter简介flutter是google推出的基于dart语言开发的跨平台开源ui框架，旨在统一纷纷扰扰的跨平台开发框架，在ui层面上多端共用一套dart... [阅读全文]
Android 自定义LineLayout实现满屏任意拖动功能的示例代码

1.前言在开发中，会有需求实现控件在屏幕随意拖动，这就需要自定义view,然后在ontouchevent事件中，处理motionevent.action_mov... [阅读全文]
Android scheme 跳转的设计与实现详解

缘起随着 app 的成长，我们难免会遇到以下这些需求： h5 跳原生界面 notification 点击调相关界面根据后台返回数据跳转界面，例如登录成功... [阅读全文]
Android 通过腾讯TBS实现文件预览功能

1.集成腾讯tbs使用腾讯tbs来预览pdf,word,excel,ppt等多种类型的文件，去下载sdk，按照官方文档文档集成sdk。2.使用tbsreade... [阅读全文]
android 限制某个操作每天只能操作指定的次数(示例代码详解)

最近有个需求，要求启动页的拦截页每天只能显示3次，超过三次就显示别的页面，然后到第二天才可以再次显示，利用sharepreferences保存天数和每天的次数，... [阅读全文]
Android 集成 google 登录并获取性别等隐私信息的实现代码

前言公司做海外产品的，集成的是 google 账号登录，账号信息、邮箱等这些不涉及隐私的按 google 的正常登录流程可以轻松实现。但是一旦需要获取涉及隐私... [阅读全文]
Android 应用Crash 后自动重启的方法小结

前提首先，我们肯定要在application里面注册一个crashhandler，监听应用crashpublic class testapplication e... [阅读全文]
Android FTP服务器上传文件攻略(代码详解)

1.前言在开发中，会遇到向ftp服务器上传文件的需求,首先要导入commons-net-3.3.jar 然后利用api进行相关操作，具体功能如下：ftp相关代码... [阅读全文]

网友评论


验证码：

Flutter学习笔记（20）--FloatingActionButton、PopupMenuButton、SimpleDialog、AlertDialog、SnackBar

2019年08月21日 | 移动技术网IT编程 | 我要评论

如需转载，请注明出处：flutter学习笔记（20）--floatingactionbutton、popupmenubutton、simpledialog、alertdialog、snackbar

floatingactionbutton

popupmenubutton

simpledialog

alertdialog

snackbar

您可能感兴趣的文章:

相关文章:

网友评论