文章目录
前言
一、要实现什么?
其他的弹窗的说明和使用说明,比如showMenu 等;
二、使用步骤
1.showMenu
实现一个点击按键退出menu ,可以选择选择,然后改变button 的颜色,如果点击其他的区域。返回的数值是null 所以还需要对应null 的情况进行一下处理,不然会报错;
代码如下(示例):
Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(btncolor)),
onPressed: () async {
dynamic mycolor = await showMenu(
color: Colors.indigo.withOpacity(0.7), //弹出框的颜色
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(15))), //给弹出框添加一个圆角形状
elevation: 10,
context: context,
position: RelativeRect.fill, //弹出的位置,默认是在左上角的
items: <PopupMenuEntry>[
// value 可以是任何的object ,比如可以是颜色,你点击就可以传递该颜色,返回该颜色的
const PopupMenuItem(
// onTap: () => print('ddd'),
padding: EdgeInsets.all(5),
value: Colors.indigo,
child: Text('选项1 indigo')),
const PopupMenuDivider(), //下划线
const PopupMenuItem(
padding: EdgeInsets.all(5),
value: Colors.pink,
child: Text('选项2 pink')),
const PopupMenuDivider(), //下划线
const PopupMenuItem(
padding: EdgeInsets.all(5),
value: Colors.black,
child: Text('选项3 black')),
const PopupMenuDivider(), //下划线
const PopupMenuItem(
padding: EdgeInsets.all(5),
value: Colors.green,
child: Text('选项4 green')),
const PopupMenuDivider(), //下划线
// 打钩选中的状态
const CheckedPopupMenuItem(
checked: true,
padding: EdgeInsets.all(5),
value: Colors.yellow,
child: Text('选项5 yellow')),
]);
// mycolor 点击其他区域开会导致返回null 所以null 的情况也需要处理一下
if (mycolor != null) {
setState(() {
btncolor = mycolor;
});
}
},
child: Text('showMenu'))
],
),
),
);
1. 弹出的位置是在默认左上角,如果要实现在点击的地方出现,那就需要计算widget 的位置
一般是需要自己封装下button 按键到一个stl 里面,单独一个然后去获取到该button的position
final RenderBox btn= context.findRenderObject();
final RenderBox overlay = Overlay.of(context).context.findRenderObject();
final RelativeRect position = RelativeRect.fromRect(
Rect.fromPoints(
btn.localToGlobal(Offset(0, 0), ancestor: overlay),
btn.localToGlobal(button.size.bottomRight(Offset.zero),
ancestor: overlay),
),
Offset.zero & overlay.size,
);
但是这样的情况,就需要做很多的判断,不然可能出现弹出的内容会超出屏幕的情况。
但是万物皆是widget 的flutter 提供其他的widget可以快速的实现这样的
2.PopupMenuButton
tooltip: '提示条', //在widget 放置鼠标等操作会显示该提示,比如功能说明等
elevation: 10,
color: Colors.blueAccent, //背景颜色
shape: const RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(15))), // 形状,给弹出框添加一个圆角形状
// splashRadius: 0.5,//触发按键的博文半径
initialValue: Colors.indigo, //初始值,颜色是Colors.indigo 的选项会高亮
icon: const Icon(Icons.apple), //触发按键的图标
iconSize: 50,
enableFeedback: true,
position: PopupMenuPosition.over, //under 左对齐,over 右下角
onSelected: (value) {
// 点击选择选择,之后返回选择的数值
print(value);
},
// 没有点击选项,取消了操作
onCanceled: () {
print('onCanceled');
},
PopupMenuButton(
tooltip: '提示条', //在widget 放置鼠标等操作会显示该提示,比如功能说明等
elevation: 10,
color: Colors.blueAccent, //背景颜色
shape: const RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(15))), // 形状,给弹出框添加一个圆角形状
// splashRadius: 0.5,//触发按键的博文半径
initialValue: Colors.indigo, //初始值,颜色是Colors.indigo 的选项会高亮
icon: const Icon(Icons.apple), //触发按键的图标
iconSize: 50,
enableFeedback: true,
position: PopupMenuPosition.over, //under 左对齐,over 右下角
onSelected: (value) {
// 点击选择选择,之后返回选择的数值
print(value);
},
// 没有点击选项,取消了操作
onCanceled: () {
print('onCanceled');
},
itemBuilder: (context) {
return <PopupMenuEntry>[
const PopupMenuItem(
value: Colors.indigo,
child: Text('I AM COLOR 1'),
),
const PopupMenuItem(
value: Colors.green,
child: Text('I AM COLOR 2'),
),
const PopupMenuItem(
value: Colors.red,
child: Text('I AM COLOR 3'),
),
const PopupMenuItem(
value: Colors.grey,
child: Text('I AM COLOR 4'),
),
const PopupMenuItem(
value: Colors.deepPurple,
child: Text('I AM COLOR 5'),
),
];
},
)
3.showAboutDialog
弹出关于的提示框,但是其他前面学习的弹出框,自己也可以定义,但是官方自己有封装了一般使用的关于的样式,不妨也可以快速学习下,可以在需要的使用快速完成。
基础功能使用
ElevatedButton(
onPressed: () {
showAboutDialog(
context: context,
applicationName: '国际版抖音',
applicationIcon: const Icon(Icons.face_unlock_sharp),
applicationVersion: '1.0.3',
applicationLegalese: 'copyright @ 2022 什么',
children: [
const ListTile(
leading: Icon(Icons.label_important_outline),
title: Text('关于我们这个软件怎么样'),
subtitle: Text('然后怎么样又怎么样'),
)
]);
},
child: const Text('showAboutDialog'))
你会发现按钮是英文的?为什么?因为没有做国际化的处理,这些内置的widget 大部分是做好了国际的,你只需要在代码端运行配置下,如下:(后续文章有国际化的具体的操作和学习)
国际化
1.配置下pubspec.yaml
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
2.MaterialApp 配置,支持中文和英语
切换手机设备的地区,app就会切换显示中文和英文
return MaterialApp(
title: 'Flutter Demo',
localizationsDelegates: const [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate
],
supportedLocales: const [
Locale('zh', 'CH'),
Locale('en', 'US'),
],
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
![在这里插入图片描述](https://img-blog.csdnimg.cn/ce8ba7d6a91940c79ffbb12724ade9c8.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/bef060881a3542549d12e1897c259ea8.png)
---
# 总结
合理的使用官方自带的wige可以加快开发的速度,减少很多比必要的世界。