如何使下拉按鈕創建的列表形狀為圓形？

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 包中復制了Dropdown小部件代碼，將ClipRRect添加到_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 。

當您從修改后的文件中導入此Dropdown小部件時，還要確保從package:flutter/material.dart中hide 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中添加borderRadius屬性：

 DropdownButton( borderRadius:BorderRadius.circular(12), items: ... )

Answer 4

DropdownButton中有一個屬性叫做elevation需要設置為0以避免陰影

DropdownButton<String>(
    elevation: 0,
)