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) 上一篇梳理了拥有单个子元素布局 ...
随机推荐
- Win10更新后，MySQL服务莫名消失的问题
手欠的给Win10更新,之后就发现右下角托盘里的小海豚变成白色的了,最后确认MySQL服务丢失 解决办法1: 1.重新安装服务:mysqld --install 2.如果之前没有自定义数据保存路径(d ...
- Apache struts2 namespace远程命令执行_CVE-2018-11776(S2-057)漏洞复现
Apache struts2 namespace远程命令执行_CVE-2018-11776(S2-057)漏洞复现 一.漏洞描述 S2-057漏洞产生于网站配置xml的时候,有一个namespace的 ...
- Windows Presentation Foundation (WPF) 项目中不支持xxx的解决
一般Windows Presentation Foundation (WPF) 项目中不支持xxx都是由于没引用相应的程序集导致,比如Windows Presentation Foundation ( ...
- SpringBoot之SpringApplication Explain
SpringApplication Explain The SpringApplication class provides a convenient way to bootstrap a Sprin ...
- css基础5
今天在这里跟大家分享css基础最核心的部分,浮动和定位.话不多说,直接上干货! 一.浮动 定义:定位元素是相对于其正常位置应该出现的位置.定位元素的位置是相对于自身.父级元素位置.其他元素以及浏览器窗 ...
- Excel催化剂100+大主题功能梳理导读
Excel催化剂历经1年4个月的开发时间,终于荣登100+个大主题功能,完成数据领域的功能大矩阵,可以说在日常的数据处理及分析上,绝大部分的共性场景已经囊括其中,是数据工作者难得一遇的优秀作品之一.因 ...
- Android学习总结之开发工具AndroidStudio的安装与配置
安装AndroidStudio 首先下载AndroidStudio的安装包,直接在百度AndroidStudio下载即可,安装过程简单,只需要修改安装路径(不要有空格和中文即可).然后下一步下一步就可 ...
- classpath和classpath*区别
classpath和classpath*区别: classpath:只会到你的class路径中查找找文件. classpath*:不仅包含class路径,还包括jar文件中(class路径)进行查找. ...
- C/C++中指向结构体变量的指针，调用指向的那个结构体中的成员
设p是指向结构体变量的指针,则可以通过以下的方式,调用指向的那个结构体中的成员: (1)结构体变量.成员名.如,stu.num. (2)(*p).成员名.如,(*p).num. (3)p->成员 ...
- SQLyog12最新版破解
1.SQLyog-12.2.4-0.x64Trial.exe,直接去官网下载. 2.修改注册表项 开始-运行-regedit ,进入注册表 HKEY_CURRENT_USER\Software\ ...