自定义下拉按钮和 MenuItems Flutter

Question

我正在尝试使用分离和压缩的菜单项构建我自己的下拉按钮，如下图所示：

这是我到目前为止尝试过的代码，我得到了与容器相匹配的下拉宽度，但到目前为止无法自定义项目，高度始终从按钮上方开始并且不占用宽度容器：

body: Container(
    margin: EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
    child: Container(
      width: double.infinity,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(10.0)),
          border: Border.all(color: Colors.brown, width: 1.0)),
      padding: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
      child: DropdownButtonHideUnderline(
        child: ButtonTheme(
          alignedDropdown: true,
          child: DropdownButton(
            isExpanded: true,
            isDense: true,
            value: selection,
            icon: Icon(
              Icons.arrow_drop_down,
              color: Colors.brown,
            ),
            iconSize: 40,
            underline: Container(
              height: 1,
              color: Colors.transparent,
            ),
            onChanged: (String val) => setState(() => selection = val),
            items: settingsOptions.map((option) {
              return DropdownMenuItem(
                value: option,
                child: Text(option),
              );
            }).toList(),
          ),
        ),
      )
    ),
  ),

这是代码的输出：

如何像第一张图片那样自定义项目的宽度、高度并添加分隔线？谢谢

Answer 1

此为示例，随意修改！

DropdownButton(
        isExpanded: true,
        isDense: true,
        value: selection,
        icon: Icon(
          Icons.arrow_drop_down,
          color: Colors.brown,
        ),
        iconSize: 40,
        underline: Container(
          height: 1,
          color: Colors.transparent,
        ),
        onChanged: (String val) => setState(() => selection = val),
        items: sampleList.map((option) {
          return DropdownMenuItem(
            value: option,
            child: Container(
              width:double.infinity,
              alignment:Alignment.centerLeft,
              padding: const EdgeInsets.fromLTRB(0,8.0,0,6.0),
              child:Text(option),
              decoration:BoxDecoration(
              border:Border(top:BorderSide(color:Colors.grey,width:1))
              )
            ),
          );
        }).toList(),
        selectedItemBuilder:(con){
              return sampleList.map((m){
                return Text(m,);
              }).toList();
            }
      )

Answer 2

我在 pub.dev 中遇到了一个名为 dropdown_below 的 flutter 库。它具有其他方法，可让您根据首选布局自定义 dropdownMenuItem。

DropdownBelow(
                    value: category,
                    // isDense: true,
                    itemWidth: MediaQuery.of(context).size.width * 0.92,
                    itemTextstyle: TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.w400,
                        color: Colors.black),
                    boxTextstyle: TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.w400,
                        color: Colors.grey.shade600),
                    boxPadding: EdgeInsets.fromLTRB(13, 12, 0, 12),
                    boxWidth: MediaQuery.of(context).size.width,
                    boxHeight: 60,
                    hint: Text('choose video'),
                    items: video.data.value.videos
                        .map((e) => DropdownMenuItem(
                              onTap: () => e.title,
                              value: e.title ?? category,
                              child: Container(
                                width: double.infinity,
                                decoration: BoxDecoration(),
                                child: Padding(
                                  padding: const EdgeInsets.all(8.0),
                                  child: Text(
                                    e.title ?? '$category',
                                    overflow: TextOverflow.ellipsis,
                                  ),
                                ),
                              ),
                            ))
                        .toList(),
                    onChanged: (video) {
                      context.read(videoProvider).cateroryOnChange(video);
                    },
                  ),

图书馆Link：https://pub.dev/packages/dropdown_below

Answer 3

DropdownButton 的问题是菜单会根据所选索引和其他内容随机打开。此外，您不能通过仅尝试将偏移量作为基于此的绘制工作的逻辑代码传递并尝试将 selectedItemOffset 硬编码为一个值来编辑它的代码将无法正常工作。

所以使用 DropDownButton2 ，它就建立在这个 .

包裹：DropDownButton2

学分：

供参考：

自定义下拉按钮和 MenuItems Flutter

Custom Dropdown Button and MenuItems Flutter

flutter

drop-down-menu

menuitem