Question

我有一个下拉按钮，它的边缘呈圆形。现在，如何使单击下拉菜单时弹出的列表的边缘也变圆？

下拉菜单图片：

单击下拉菜单时弹出的列表图像（我想使这些边缘像下拉按钮一样四舍五入）：

我的代码：

return Theme(
  data: ThemeData(canvasColor: cardBlueColor, brightness: Brightness.dark),
  child:Container(
    width:MediaQuery.of(context).size.width/1.25,
    child:Card(
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.0)),
      color: cardBlueColor,
      elevation: 8.0,
      child:DropdownButtonHideUnderline(
        child: ButtonTheme(
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.0)),
          alignedDropdown: true,
          child: DropdownButton(
            elevation: 8,
            icon: Icon(Icons.keyboard_arrow_down),
            value: _dateSelected,
            hint: AutoSizeText(NA_FLIGHT_PAGE_DROPDOWN, style: TextStyle(color: white,),textAlign: TextAlign.center,),
            isDense: false,
            onChanged: (String newValue){
              setState(() {
                _dateSelected = newValue;
                dropdownMap = _getDropdownMap(snapshot);     
              });
            },
            items: dropdownList.map((key){
              return DropdownMenuItem<String>(
                value: key.toString(),
                child: AutoSizeText(key.toString(), style: TextStyle(color: white,),textAlign: TextAlign.center,),
              );
            }).toList(),
          ),
        ),
      )
    )
  )
);

我尝试过的事情：

// adding a shape to the button theme
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.0))

// using a container with radius and making canvas transparent
data: ThemeData(canvasColor: transparent, brightness: Brightness.dark),

// omitted code

  return DropdownMenuItem<String>(
    value: key.toString(),
    child: Container(
      decoration: BoxDecoration(color:cardBlueColor, borderRadius: BorderRadius.all(Radius.circular(10))),
      child: AutoSizeText(key.toString(), style: TextStyle(color: white,),textAlign: TextAlign.center,),
    ) 
  );

建议使用透明画布颜色方法的容器图像：

Answer 1

我能够为这样的下拉菜单列表创建圆角，

。

这就是我的做法

我从Flutter Material package复制了Dropdown小部件代码，并在_DropdownMenu小部件的构建方法中添加了ClipRRect。

您可以在存储库中下载this file，并将代码从第270行更改为第302行

child: ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(20)),
        child: CustomPaint(
          painter: _DropdownMenuPainter(
            color: widget.dropdownColor ?? Theme.of(context).canvasColor,
            elevation: route.elevation,
            selectedIndex: route.selectedIndex,
            resize: _resize,
            // This offset is passed as a callback, not a value, because it must
            // be retrieved at paint time (after layout), not at build time.
            getSelectedItemOffset: () =>
                route.getItemOffset(route.selectedIndex),
          ),
          child: Semantics(
            scopesRoute: true,
            namesRoute: true,
            explicitChildNodes: true,
            label: localizations.popupMenuLabel,
            child: Material(
              type: MaterialType.transparency,
              textStyle: route.style,
              child: ScrollConfiguration(
                behavior: const _DropdownScrollBehavior(),
                child: Scrollbar(
                  child: ListView(
                    controller: widget.route.scrollController,
                    padding: kMaterialListPadding,
                    shrinkWrap: true,
                    children: children,
                  ),
                ),
              ),
            ),
          ),
        ),
      ),

还将删除从15行到26行的导入并添加此行

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

请确保将BorderRadius设置为所需的大小，如果要制作循环列表，请查看ClipOval并将ClipRRect更改为ClipOval。

还要确保从此修改后的文件中导入hide小部件时Dropdown package:flutter/material.dart或Dropdown中的其他相关小部件。

Answer 2

首先，我认为您需要将ThemeData.canvasColor更改为透明。然后尝试以下方法：

    items: <DropdownMenuItem>[
      DropdownMenuItem(
        child: Container(
          decoration: BoxDecoration(
            color: Colors.green,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(15.0),
              topRight: Radius.circular(15.0),
            ),
          ),
        ),
      ),
      DropdownMenuItem(
        child: Container(
          decoration: BoxDecoration(
            color: Colors.green,
          ),
        ),
      ),
      DropdownMenuItem(
        child: Container(
          decoration: BoxDecoration(
          color: Colors.green,
          borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(15.0),
            bottomRight: Radius.circular(15.0),
          ),
        ),
      ),
    ),
  ],

因此，第一个项目在顶部四舍五入，最后一个项目在底部四舍五入，可能有一种更优雅的方法，但是它应该起作用。

Answer 3

DropdownButton中有一个称为高程的属性，需要将其设置为0以避免阴影

DropdownButton<String>(
    elevation: 0,
)

如何使由下拉按钮创建的列表的形状为圆形？

3 个答案: