【Flutter】【widget】其他弹窗showMenu，PopupMenuButton ，showAboutDialog 等（3）

最新推荐文章于 2023-10-27 10:12:46 发布

Cartoon SuperMan

最新推荐文章于 2023-10-27 10:12:46 发布

阅读量1.2k

点赞数

分类专栏： Flutter 文章标签： flutter

本文链接：https://blog.csdn.net/weixin_43444734/article/details/127527289

版权

Flutter 专栏收录该内容

51 篇文章 4 订阅

订阅专栏

文章目录

前言
一、要实现什么？
二、使用步骤

在这里插入图片描述

前言

一、要实现什么？

其他的弹窗的说明和使用说明，比如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可以加快开发的速度，减少很多比必要的世界。