flutter - 对 DropdownButtons 的项目列表的边缘进行四舍五入

Question

如何使包含 DropDownButtonItems 的 DropdownButton 的打开列表的边缘变圆？

这就是我所拥有的：

String selectedValue;

DropdownButtonHideUnderline(
  child: DropdownButton<String>(
    style: TextStyle(
      fontWeight: FontWeight.w600,
      fontSize: 18,
      color: Colors.black,
    ),
    isExpanded: true,
    value: selectedValue, //var that
    items: getDropdownItems4(), //simple function that holds the values of all the items
    onChanged: (String value) {
      setState(() {
        selectedValue = value;
      });
    },
  ),
),

标签： flutter

Answer 1

的代码在DropdownButton这里：https ://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/dropdown.dart

当我们阅读它时，我们发现大部分与组件外观相关的代码都是私有的，并且样式是硬编码在文件中的。

例如，这是定义边界半径的地方：https ://github.com/flutter/flutter/blob/2f993d70c178f4a927da5d7d76bd527115920695/packages/flutter/lib/src/material/dropdown.dart#L49

因此，剩下的唯一选择是复制/粘贴该代码并根据需要编辑样式。

• 将整个“dropdown.dart”文件复制粘贴到项目的“my_dropdown.dart”中。
• 更改文件中的相对导入（请参阅下面的要点）
• 在你想使用组件的地方导入“my_dropdown.dart”并隐藏“官方”组件：

import 'package:flutter/material.dart'
    hide DropdownButton, DropdownMenuItem, DropdownButtonHideUnderline;
import 'my_dropdown.dart';

示例要点：https ://gist.github.com/xvrh/29b7ddf5e4dbd47f6382b241c64b8843

请注意，这种技术有很多缺点。您正在向项目中添加 1500 行代码，这些代码将不再由颤振团队维护/更新/测试。