当前位置: 首页 > 知识库问答 >
问题:

如何在Flutter中为PopupMenu添加圆角边框?

谯皓君
2023-03-14

有什么方法可以让我创建带有圆形边框的自定义弹出窗口?这是我目前的代码和设计:

                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],
                   ),
                 ),
               ),

共有3个答案

慎志国
2023-03-14

除了@Taz给出的答案之外,您还可以使用主题在一个地方为每个弹出窗口设置圆角:

MaterialApp(
  // ....
  theme: ThemeData(
  // ....
  popupMenuTheme: PopupMenuThemeData(
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8))
  )
)
李兴为
2023-03-14

另一种简单的方法是:

shape: ContinuousRectangleBorder(
         borderRadius: BorderRadius.circular(30),
       ),
南门正祥
2023-03-14

您只需在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"),
        ),
      ],
    ),
 类似资料:
  • 本文向大家介绍flutter Container容器实现圆角边框,包括了flutter Container容器实现圆角边框的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了flutter Container容器实现圆角边框的具体代码,供大家参考,具体内容如下 在这里使用 Container 容器来实现圆角矩形边框效果 1 圆角矩形边框 2 圆角矩形边框 3 可点击的圆角矩形边框 使用

  • 在Web页面上,圆角效果是美化页面的常用手法之一,圆角给页面添加曲线之美,让页面不那么生硬。但是,为了设计圆角,设计师常常需要花费很多的时间和精力。 在CSS3中,专门针对圆角效果增加了一个 border-radius属性,通过该属性,便可以轻松实现圆角效果,设计师不必再为圆角而伤透脑筋。 border-radius属性的值为边框的圆角半径,可以使用任意合法的CSS长度值,如em、pt、px、百分

  • 我正在尝试将圆角边框设置为我的,为此,我正在设置一个来形状属性的,问题是它没有效果。 代码: 结果:

  • 我要做什么::我想使用我当前的实现为圆形图像添加一个黑色边框,如何在不使用第三方库的情况下实现这一点 全面转变。JAVA

  • 下面的屏幕截图显示了对1的测试。我想使矩形外的组件的角完全透明 但是,当父面板上有红色背景(或任何非标准颜色)时,您可以看到这种方法的缺点。拐角默认为默认面板颜色(最容易在中看到)。 最终,我希望它能用于父容器中的非标准颜色,但它的部分灵感来自于我需要做什么才能用渐变绘制复制此组件? 有人知道如何让这些角落透明吗? 而是为JTextArea的内部填充设计的,带有背景图像(