圆形图标弹出菜单的正确波纹效果形状

Posted 2023-02-23

【中文标题】圆形图标弹出菜单的正确波纹效果形状

【英文标题】：Correct ripple effect shape for circular icon popup menu

【发布时间】：2020-02-17 10:12:18

【问题描述】：

在 Flutter 中，我想为带有圆形边框的图标按钮设置样式，并让 Material 波纹效果正常工作，以便波纹效果包含在圆圈中。在下面的代码中，第一个按钮可以正常工作。在第二个（弹出）按钮中，波纹效果延伸到按钮周围的正方形，而不是被限制在圆形边框上。

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'))),
            ],
          ),
        ],
      ),
    ),
  ),
);

有没有办法让弹出按钮正常工作？

【问题讨论】：

你试过用ClipRRect包裹你的PopupMenuButton吗？

@Ovidiu 我试过ClipRRect(borderRadius: BorderRadius.circular(24), child: PopupMenuButton(...))，但不幸的是没有任何效果。

【参考方案1】：

您需要使用ClipRRect 以及Material：

ClipRRect(
  borderRadius: BorderRadius.circular(24),
  child: Material(
    color: Colors.transparent,
    child: PopupMenuButton<String>(
    ...

PopupMenuButton 用InkWell 包裹child，由于某种原因，除非也包裹在Material 中，否则它不会被剪裁。