Flutter学习笔记（20）--FloatingActionButton、PopupMenuButton、SimpleDialog、AlertDialog、SnackBar
如需转载，请注明出处：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,
);
}
);
}
}
Flutter学习笔记（20）--FloatingActionButton、PopupMenuButton、SimpleDialog、AlertDialog、SnackBar的更多相关文章
- Flutter学习笔记（15）--MaterialApp应用组件及routes路由详解
如需转载,请注明出处:Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解 最近一段时间生病了,整天往医院跑,也没状态学东西了,现在是好了不少了,也该继续学习啦!!! ...
- Flutter学习笔记（22）--单个子元素的布局Widget（Container、Padding、Center、Align、FittedBox、Offstage、LimitedBox、OverflowBox、SizedBox）
如需转载,请注明出处:Flutter学习笔记(22)--单个子元素的布局Widget(Container.Padding.Center.Align.FittedBox.Offstage.Limited ...
- Flutter学习笔记（8）--Dart面向对象
如需转载,请注明出处:Flutter学习笔记(7)--Dart异常处理 Dart作为高级语言,支持面向对象的很多特性,并且支持基于mixin的继承方式,基于mixin的继承方式是指:一个类可以继承自多 ...
- Flutter学习笔记（9）--组件Widget
如需转载,请注明出处:Flutter学习笔记(9)--组件Widget 在Flutter中,所有的显示都是Widget,Widget是一切的基础,我们可以通过修改数据,再用setState设置数据(调 ...
- Flutter学习笔记（11）--文本组件、图标及按钮组件
如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 文本组件 文本组件(text)负责显示文本和定义显示样式,下表为text常见属性 Text组件属性及描述 属性名 类型 默认 ...
- Flutter学习笔记（14）--StatefulWidget简单使用
如需转载,请注明出处:Flutter学习笔记(14)--StatefulWidget简单使用 今天上班没那么忙,突然想起来我好像没StatefulWidget(有状态组件)的demo,闲来无事,写一个 ...
- Flutter学习笔记（16）--Scaffold脚手架、AppBar组件、BottomNavigationBar组件
如需转载,请注明出处:Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解 今天的内容是Scaffold脚手架.AppBar组件.BottomNavigationBa ...
- Flutter学习笔记（21）--TextField文本框组件和Card卡片组件
如需转载,请注明出处:Flutter学习笔记(21)--TextField文本框组件和Card卡片组件 今天来学习下TextField文本框组件和Card卡片组件. 只要是应用程序就少不了交互,基本上 ...
- Flutter学习笔记（23）--多个子元素的布局Widget（Rwo、Column、Stack、IndexedStack、Table、Wrap）
如需转载,请注明出处:Flutter学习笔记(23)--多个子元素的布局Widget(Rwo.Column.Stack.IndexedStack.Table.Wrap) 上一篇梳理了拥有单个子元素布局 ...
随机推荐
- iPhone调试移动端webview
一.模拟器调试 1.启动Xcode 2.选择菜单Xcode - Open Developer Tool - Simulator 3.启动Simulator后,选择Simulator菜单Hardware ...
- 快速掌握mongoDB(四)—— C#驱动MongoDB用法演示
前边我们已经使用mongo shell进行增删查改和聚合操作,这一篇简单介绍如何使用C#驱动MongoDB.C#驱动MongoDB的本质是将C#的操作代码转换为mongo shell,驱动的API也比 ...
- Python趣用—配平化学方程式
不知不觉已经毕业多年了,不知道大家是否还记得怎么配平化学方程式呢?反正小编我是已经记不太清了,所以今天的文章除了分享如何用python配平化学方程式,顺带着还会复习 一些化学方程式的知识,希望广大化学 ...
- 【CYH-02】NOIp考砸后虐题赛:转换式：题解
这道题真的不难吧. 如@AKEE@AKEE@AKEE 大佬所说,此题的确可以将n推广到一般情况. 但题面还是良心的只到了N<=4N<=4N<=4 以目前的题目来看,简单模拟即可. 分 ...
- Spring_简单入门（学习笔记1）
Spring是一个分层的JavaSE/EE full-stack(一站式) 轻量级开源框架. 具体介绍参考 一:IoC(Inversion of Control)控制反转,将创建对象实例反转给spri ...
- 2-1. 基于OpenSSL的传输子系统实现
一. 基本传输子系统程序设计 客户端可上传文件至服务器,或下载服务器上的文件 系统程序构架: 客户端 服务器 TCP建立连接 menu()-> 上传命令.下载命令 close(socket) T ...
- WPF音乐电台
最近一两年都没写过wpf相关的项目了,本来就不太熟的一些技巧全忘光啦,为了重新拾起这点东西,就花了几天时间做了个小demo,大致功能就是读取豆瓣电台api,获取歌单列表听歌.最开始是参考网上现有的例子 ...
- Java EE.JSP.脚本
脚本是<%与%>之间Java语言编写的代码块. 1.输出表达式 <%=表达式%>输出表达式的计算结果. 2.注释 1)输出到客户端的注释:<!-comment-> ...
- 名称空间(name space)
名称空间(name space) 函数编程中,有一个挥之不去的问题:变量名的定义. 我们知道,在相同的作用域内不能出现两个相同的变量名,否则前者被后者覆盖 我们还知道,局部变量的名字可以与全局变量的名 ...
- 转 java - 如何判断单链表有环
转自 https://blog.csdn.net/u010983881/article/details/78896293 1.穷举遍历 首先从头节点开始,依次遍历单链表的每一个节点.每遍历到一个新节点 ...