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

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))

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

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

Answer 1

我能够为下拉菜单列表创建圆角，如下所示，

。

我是这样做的，

我从Flutter Material 包Dropdown复制了widget 代码，将ClipRRect添加到widget 的构建方法中。_DropdownMenu

您可以在存储库中下载此文件并将代码从第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.dartDropdown

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),
          ),
        ),
      ),
    ),
  ],

因此，第一个项目在顶部圆形，最后一个项目在底部圆形，可能有一种更优雅的方法来做到这一点，但它应该工作相同。