如何在Flutter中为DropdownButton添加圆形形状？

Question

我想知道如何自定义DropdownButton，添加类似下图中的圆形边框。

- khalid tounoussi

Answer 1

无法以简单的方式完成此操作。您需要编辑Flutter材料包中的dropdrown.dart中的类_DropdownMenuPainter和_DropdownMenuState。在_DropdownMenuPainter中，更改构造函数中设置的BoxDecoration半径即可。请保留HTML标签。

_DropdownMenuPainter({
    ...
    this.resize,
  }) : _painter = BoxDecoration(
    ...
    borderRadius: BorderRadius.circular(16.0),  // Set the radius you want here
    boxShadow: kElevationToShadow[elevation],
  ).createBoxPainter(),
        super(repaint: resize);

在_DropdownMenuState中的build()方法内，使用ClipRRect包裹Material小部件，并将其borderRadius设置为与_DropdownMenuPainter相同：

return FadeTransition(
  opacity: _fadeOpacity,
  child: CustomPaint(
    ...
    child: Semantics(
      ...
      child: ClipRRect(
        borderRadius: BorderRadius.circular(16.0),  // This must be identical to the one set before
        child: Material(
          ...
        ),
      ),
    ),
  ),
);

注意：当您更新Flutter时，您将失去这些更改。

更新：

我原本想向Flutter提交请求，但是花费了1个小时尝试运行测试，没有成功，因此我不会浪费时间在这上面。相反，我制作了一个gist，因此您可以复制整个文件，并将其更改为本地Flutter版本。

https://gist.github.com/hugocbpassos/2a63594a21d7f231e97dd7dc1f18ee68

要使用它，只需设置radius属性：

DropdownButton(
  radius: 16,
  items: [
    ...
  ],
);

- Hugo Passos

---

我刚刚在_DropdownMenuPainter的BoxDecoration中更改了borderRadius: BorderRadius.circular(16.0)，它运行良好，非常感谢。 - khalid tounoussi

你必须创建一个 ClipRRect 的原因是有的。如果你增加半径（例如24），并点击第一个或最后一个菜单项，你会发现涟漪效果会绘制在下拉菜单外部。使用 ClipRRect 可以避免这种情况发生，所以我强烈建议你使用它，因为即使在某些不同的屏幕尺寸下，使用16半径也可能出现这种错误行为。 - Hugo Passos

@HugoPassos 必须说这是一个非常棒的实现，谢谢。 - Hardy

该网页链接已经不存在了 :( - BeniaminoBaggins