如何在颤动中向 DropdownButton 添加圆形形状？

Question

我想知道如何通过添加圆形边框来自定义 DropdownButton，如下图所示。

Answer 1

不可能以简单的方式做到这一点。您必须编辑类_DropdownMenuPainter和_DropdownMenuStatefrom dropdrown.dart，它是 Flutter 材料包的一部分。

在 中_DropdownMenuPainter，更改BoxDecoration构造函数中设置的半径：

_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()，用Materiala 包裹小部件ClipRRect并将其设置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 做一个 PR，但是花了 1 个小时尝试运行测试，但没有成功，所以我不会在这上面浪费时间。相反，我提出了一个要点，因此您可以复制整个文件以及我对本地 Flutter 副本所做的更改。

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

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

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