如何在 Flutter 中为 PopupMenu 添加圆角边框？答案

【问题标题】：How to add rounded border for PopupMenu in Flutter?如何在 Flutter 中为 PopupMenu 添加圆角边框？
【发布时间】：2019-10-31 12:52:22
【问题描述】：

有什么方法可以创建带有圆形边框的自定义弹出窗口吗？这是我当前的代码和设计：

                child: Container(
                 child: PopupMenuButton(
                   onSelected: _savedLocationOptionSelected,
                   itemBuilder: (context) {
                     return SavedLocationOptions.choises.map((value) {
                       return PopupMenuItem<String>(
                         value: value,
                         child: Text(value),
                       );
                     }).toList();
                   },
                   icon: Icon(
                     Icons.more_vert,
                     color: Colors.grey[300],
                   ),
                 ),
               ),

【问题讨论】：

同样的问题... shape 属性丢失 ^^

标签： flutter dart rounded-corners popupmenu

【解决方案1】：

在您的代码中单击“PopupMenuButton”，然后将其粘贴到将以“PopupMenu”命名的页面中，并将此链接中的代码粘贴到 Dart 文件中

然后访问此链接： https://github.com/mohamedashraf8850/flutter/edit/master/packages/flutter/lib/src/material/popup_menu.dart

【讨论】：

【解决方案2】：

您只需在 PopupMenuButton 中添加这样的内容

shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(
               Radius.circular(20.0),
          ),
),

例子

   PopupMenuButton(
      child: Text("Show Popup Menu"),
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(15.0))
      ),
      itemBuilder: (context) => [
        PopupMenuItem(
          child: Text("pub.dev"),
        ),
        PopupMenuItem(
          child: Text("Flutter"),
        ),
        PopupMenuItem(
          child: Text("Google.com"),
        ),
        PopupMenuItem(
          child: Text("https://blogdeveloperspot.blogspot.com"),
        ),
      ],
    ),

【讨论】：

【解决方案3】：

另一种简单的方法是：

shape: ContinuousRectangleBorder(
         borderRadius: BorderRadius.circular(30),
       ),

【讨论】：

【解决方案4】：

添加到@Taz 给出的答案您可以使用主题在一个位置为每个弹出窗口设置圆角：

MaterialApp(
  // ....
  theme: ThemeData(
  // ....
  popupMenuTheme: PopupMenuThemeData(
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8))
  )
)

【讨论】：