[在Flutter中,我想为图标按钮设置圆形边框,并且还希望材料波纹效果能够正常工作,以便使波纹效果包含在圆圈中。在下面的代码中,第一个按钮可以正常工作。在第二个(弹出)按钮中,波纹效果延伸到围绕按钮的正方形,而不是局限于圆形边框。
MaterialApp(
home: Scaffold(
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.black, width: 2),
shape: BoxShape.circle,
),
child: MaterialButton(
minWidth: 0,
padding: EdgeInsets.all(0.0),
child: Padding(
padding: EdgeInsets.all(11.0),
child: Icon(Icons.home, size: 27.0),
),
shape: CircleBorder(),
onPressed: () {},
),
),
PopupMenuButton<String>(
onSelected: (String action) {},
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.black, width: 2),
shape: BoxShape.circle,
),
child: Padding(
padding: EdgeInsets.all(11.0),
child: Icon(Icons.menu, size: 27.0),
),
),
itemBuilder: (BuildContext context) => [
PopupMenuItem<String>(child: ListTile(title: Text('Log Out'))),
],
),
],
),
),
),
);
是否有办法使弹出按钮正常工作?
您可以使用InkWell添加小部件
Material(
child : InkWell(
child: // your widget
),
),
快乐编码...:)
您需要同时使用ClipRRect
和Material
:
ClipRRect(
borderRadius: BorderRadius.circular(24),
child: Material(
color: Colors.transparent,
child: PopupMenuButton<String>(
...
[PopupMenuButton
用child
包裹InkWell
,由于某些原因,除非也包裹在Material
内,否则它不会被裁剪。