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) 上一篇梳理了拥有单个子元素布局 ...
随机推荐
- 20131209-数据库导入导出数据-sqlhelper-第十七天
[1] 导出数据 namespace _05导出数据 { class Program { static void Main(string[] args) { string str = "Da ...
- Java开发实例大全：3月14日练习
import java.io.FileNotFoundException; import java.io.PrintStream; import java.math.BigDecimal; impor ...
- 获取文件版本(IE)
GetFileInfoCUIAction::GetFileVersion2GetSystemDirectory WCHAR szConfigFile[MAX_PATH + 1]; ::G ...
- weblogic10.3.6重置/修改控制台账号密码
weblogic部署服务后由于交接过程中文档不完整导致有一个域的控制台账号密码遗失, 在此整理记录一下重置控制台账号密码的过程: 注:%DOMAIN_HOME%:指WebLogic Server 域( ...
- JS浅学
(变量的名字.focus(); )让打开的新的页面获取焦点 (变量的名字.close();)关闭打开的页面 可以用(!变量名)直接判断是否打开过新的页面 用(变量名.closed)判断是不是被关闭了 ...
- 自动化部署方案CICD
自动化部署方案 由于来来也的时间不久,可能对现有的部署情况不是很了解,以下是个人对POC自动化部署的设计方案. 自动化部署优点 降低成本,提高生产力,高可用,更可靠,性能优化 与gitlab持 ...
- Java性能调优之让程序“飞”起来-Java 代码优化
代码优化的目标是: 1.减小代码的体积 2.提高代码运行的效率 代码优化细节 1.尽量指定类.方法的final修饰符 带有final修饰符的类是不可派生的.在Java核心API中,有许多应用final ...
- Web前端三大框架_angular.js 6.0（二）
Web前端三大框架_angular.js 6.0(一) 需要视频教程,看头像昵称处 一.Angular 6.0 1.1样式 html中引入样式:内嵌式,外链式,行内式. ng6中组件引入样式的方式也 ...
- 二进制文件安装安装flannel
二进制文件安装安装flannel overlay网络简介 覆盖网络就是应用层网络,它是面向应用层的,不考虑或很少考虑网络层,物理层的问题. 详细说来,覆盖网络是指建立在另一个网络上的网络.该网络中的结 ...
- ubuntu搭建环境
1.终端输入 sudo apt- add-apt-repository ppa:ondrej/php sudo add-apt-repository ppa:ondrej/php sudo apt ...