如何通过使用颤动在单击按钮时创建覆盖图
•
问答
samleiming99n 回答:如何通过使用颤动在单击按钮时创建覆盖图
您可以使用软件包https://pub.dev/packages/popup_menu
并修改此软件包的文件https://github.com/chinabrant/popup_menu/blob/master/lib/triangle_painter.dart
按照以下代码将三角形移至左侧位置
else {
path.moveTo(size.width / 2.0 - 20,0.0);
path.lineTo(-20.0,size.height + 1);
path.lineTo(size.width - 20,size.height + 1);
代码段
Container(
color: Colors.blue,child: MaterialButton(
height: 45.0,key: btnKey,onPressed: maxColumn,child: Text('Show Menu'),),...
void maxColumn() {
PopupMenu menu = PopupMenu(
// backgroundColor: Colors.teal,// lineColor: Colors.tealAccent,maxColumn: 1,items: [
MenuItem(title: 'Copy',image: Image.asset('assets/copy.png')),],onClickMenu: onClickMenu,stateChanged: stateChanged,onDismiss: onDismiss);
menu.show(widgetKey: btnKey);
}
演示
完整的示例代码
import 'package:flutter/material.dart';
import 'package:popup_menu/popup_menu.dart';
import 'package:popup_menu_example/gesture_demo.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',home: MyHomePage(title: 'Popup Menu Example'),);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key,this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
PopupMenu menu;
GlobalKey btnKey = GlobalKey();
GlobalKey btnKey2 = GlobalKey();
GlobalKey btnKey3 = GlobalKey();
GlobalKey btnKey4 = GlobalKey();
@override
void initState() {
super.initState();
menu = PopupMenu(items: [
// MenuItem(title: 'Copy',// MenuItem(title: 'Home',image: Icon(Icons.home,color: Colors.white,)),MenuItem(
title: 'Mail',image: Icon(
Icons.mail,MenuItem(
title: 'Power',image: Icon(
Icons.power,MenuItem(
title: 'Setting',image: Icon(
Icons.settings,MenuItem(
title: 'PopupMenu',image: Icon(
Icons.menu,))
],onDismiss: onDismiss,maxColumn: 4);
}
void stateChanged(bool isShow) {
print('menu is ${isShow ? 'showing' : 'closed'}');
}
void onClickMenu(MenuItemProvider item) {
print('Click menu -> ${item.menuTitle}');
}
void onDismiss() {
print('Menu is dismiss');
}
@override
Widget build(BuildContext context) {
PopupMenu.context = context;
return Scaffold(
appBar: AppBar(
title: Text(widget.title),body: Container(
alignment: Alignment.centerRight,child: Column(
mainAxisAlignment: MainAxisAlignment.start,children: <Widget>[
Container(
color: Colors.blue,child: MaterialButton(
height: 45.0,Container(
child: MaterialButton(
key: btnKey2,height: 45.0,onPressed: customBackground,Container(
child: MaterialButton(
key: btnKey3,onPressed: onDismissOnlyBeCalledOnce,Container(
child: MaterialButton(
height: 30.0,child: Text('Gestures Demo'),onPressed: onGesturesDemo,);
}
void onDismissOnlyBeCalledOnce() {
menu.show(widgetKey: btnKey3);
}
void onGesturesDemo() {
menu.dismiss();
return;
Navigator.push(
context,MaterialPageRoute(builder: (context) => GestureDemo()),);
}
void checkState(BuildContext context) {
final snackBar = new SnackBar(content: new Text('这是一个SnackBar!'));
Scaffold.of(context).showSnackBar(snackBar);
}
void maxColumn() {
PopupMenu menu = PopupMenu(
// backgroundColor: Colors.teal,items: [
MenuItem(title: 'Copy',onDismiss: onDismiss);
menu.show(widgetKey: btnKey);
}
//
void customBackground() {
PopupMenu menu = PopupMenu(
// backgroundColor: Colors.teal,// maxColumn: 2,MenuItem(
title: 'Home',// textStyle: TextStyle(fontSize: 10.0,color: Colors.tealAccent),image: Icon(
Icons.home,MenuItem(
title: 'Mail',image: Icon(
Icons.mail,MenuItem(
title: 'Power',image: Icon(
Icons.power,MenuItem(
title: 'Setting',image: Icon(
Icons.settings,MenuItem(
title: 'PopupMenu',image: Icon(
Icons.menu,))
],onDismiss: onDismiss);
menu.show(widgetKey: btnKey2);
}
}