我有一个PopupMenuButton在一个FloatingActionButton里面。但是它的InkWell不是圆形的,它是标准的正方形。我怎样才能实现呢?
pu82cl6c1#
使用InkWell的customBorder属性:
InkWell
customBorder
InkWell( customBorder: CircleBorder(), onTap: () {} child: ... )
irlmq6kh2#
您可以使用InkWell的borderRadius属性来获得圆形墨水飞溅。
borderRadius
Material( color: Colors.lightBlue, borderRadius: BorderRadius.circular(25.0), child: InkWell( splashColor: Colors.blue, borderRadius: BorderRadius.circular(25.0), child: Text('Button'), ), ),
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"), ), ], ), ), ), ),
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;
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, ), ), ), ), )
wwtsj6pe6#
这里的大多数答案都没有像指定的问题那样使用PopupMenuButton。如果你只是使用一个图标子项,那么你可以使用icon属性而不是上面已经解释过的子项,但是如果你想在其他子项上使用圆角,你可以用Material Package 它,然后用ClipRRectSee this Stackoverflow Package 它
6条答案
按热度按时间pu82cl6c1#
使用
InkWell
的customBorder
属性:irlmq6kh2#
您可以使用
InkWell
的borderRadius
属性来获得圆形墨水飞溅。9rnv2umw3#
要将墨水池的形状从标准方形更改为圆形,请使用Material的borderRadius属性。示例代码如下所示-
yfwxisqw4#
我遇到过类似的问题,PopupMenubutton的子对象周围有一个方形墨水池。
为了使它的行为像IconButton一样(它自然使用圆形的InkWell),我只需要使用图标参数而不是子参数。
这在该参数的文档中指出:
daupos2t5#
用材料包裹墨水池。添加边框半径
以下是如何使点击效果看起来正确
wwtsj6pe6#
这里的大多数答案都没有像指定的问题那样使用PopupMenuButton。如果你只是使用一个图标子项,那么你可以使用icon属性而不是上面已经解释过的子项,但是如果你想在其他子项上使用圆角,你可以用Material Package 它,然后用ClipRRectSee this Stackoverflow Package 它