时间戳

首页 > 解决方案 > 如何在颤动中将圆形添加到下拉按钮？

dart - 如何在颤动中将圆形添加到下拉按钮？

问题描述

我想知道如何通过在图片中添加圆形边框来自定义 DropdownButton 。

在此处输入图像描述

标签： dartflutter

解决方案

不可能以简单的方式做到这一点。您必须编辑类_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()，用 a 包装Material小部件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: [
    ...
  ],
);

推荐阅读