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

Question

我在 FloatingActionButton 中有一个 PopupMenuButton。 但它的 InkWell 不是圆形的，它是标准的方形。 我怎样才能做到这一点？

Answer 1

使用customBorder财产InkWell ：

InkWell(
    customBorder: CircleBorder(),
    onTap: () {}
    child: ...
)

Answer 2

您可以使用borderRadius财产InkWell得到一个圆形的油墨飞溅。

Material(
 color: Colors.lightBlue,
 borderRadius: BorderRadius.circular(25.0),
 child: InkWell(
  splashColor: Colors.blue,
  borderRadius: BorderRadius.circular(25.0),
  child: Text('Button'),
 ),
),

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。

为了让它表现得像一个自然使用圆形 InkWell 的 IconButton，我只需要使用图标参数而不是孩子。

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;

Answer 5

用材料包裹墨水瓶。 添加边框半径

Material(
                
                borderRadius: BorderRadius.all( // add
                  Radius.circular(20) 
                ),
                child: InkWell(
                  child: Ink(
                    padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
                    child: Text(
                      "Kayıt Ol",
                      
                      style: TextStyle(
                        color: cKutuRengi,
                      ),
                    ),
                  ),
                ),
              )

这是使点击效果看起来正确的方法

Material(
                
                borderRadius: BorderRadius.all(
                  Radius.circular(20)
                ),
                child: InkWell(
                  customBorder:RoundedRectangleBorder( // add
                    borderRadius: BorderRadius.all(
                      Radius.circular(20)
                    )
                  ),
                  onTap: () {
                    debugPrint("on tap");
                  },
                  child: Ink(
                    
                    padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
                    child: Text(
                      "Kayıt Ol",
                      
                      style: TextStyle(
                        color: cKutuRengi,
                      ),
                    ),
                  ),
                ),
              )

Answer 6

这里的大多数答案都没有像指定的问题那样使用 PopupMenuButton。 如果你只是简单地使用一个 icon child 那么你可以使用 icon 属性而不是上面已经解释过的 child ，但是如果你想要其他孩子的圆角，你可以用 Material 包裹它，然后用 ClipRRect 包裹它See this堆栈溢出