Question

我在FloatingActionButton中有一个PopupMenuButton。但是它的InkWell不是圆形的，它是标准的正方形。我该如何实现？

Answer 1

您可以使用borderRadius的{{1}}属性来获取舍入的墨水飞溅。

InkWell

Answer 2

使用customBorder的{{1}}属性：

InkWell

Answer 3

要将InkWell的形状从标准正方形更改为圆形，请使用Material的borderRadius属性。示例代码如下-

floatingActionButton: FloatingActionButton(
            backgroundColor: Colors.green,
            child: Material(
              color: Colors.yellow,
              borderRadius: BorderRadius.all(Radius.circular(5.0)),
              child: InkWell(
                child: PopupMenuButton(
                  //shape is used to change the shape of popup card 
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.0)),
                  child: Icon(Icons.mode_edit, size: 22.0, color: Colors.red,),
                  itemBuilder: (context) => [
                    PopupMenuItem(
                      child: Text("Child 1"),
                    ),
                    PopupMenuItem(
                      child: Text("Child 2"),
                    ),
                  ],
                ),
              ),
            ),
          ),

Answer 4

我遇到了类似的问题，PopupMenuButton的子项周围会有一个方形的InkWell。

为了使其表现得像IconButton，它自然使用了四舍五入的InkWell，我只需要使用图标参数代替子参数即可。

icon: Icon(Icons.more_vert),

在该参数的文档中对此进行了说明：

  /// If provided, the [icon] is used for this button
  /// and the button will behave like an [IconButton].
  final Widget icon;

Flutter：如何制作圆形的PopupMenuButton的InkWell？

4 个答案: