Flutter:我怎样才能使PopupMenuButton的墨水池变成圆形?

5cg8jx4n  于 2022-12-30  发布在  Flutter
关注(0)|答案(6)|浏览(143)

我有一个PopupMenuButton在一个FloatingActionButton里面。但是它的InkWell不是圆形的,它是标准的正方形。我怎样才能实现呢?

pu82cl6c

pu82cl6c1#

使用InkWellcustomBorder属性:

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

irlmq6kh2#

您可以使用InkWellborderRadius属性来获得圆形墨水飞溅。

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

9rnv2umw3#

要将墨水池的形状从标准方形更改为圆形,请使用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"),
                    ),
                  ],
                ),
              ),
            ),
          ),
yfwxisqw

yfwxisqw4#

我遇到过类似的问题,PopupMenubutton的子对象周围有一个方形墨水池。
为了使它的行为像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;
daupos2t

daupos2t5#

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

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

wwtsj6pe6#

这里的大多数答案都没有像指定的问题那样使用PopupMenuButton。如果你只是使用一个图标子项,那么你可以使用icon属性而不是上面已经解释过的子项,但是如果你想在其他子项上使用圆角,你可以用Material Package 它,然后用ClipRRectSee this Stackoverflow Package 它

相关问题