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 的颤动库。它有额外的方法可以让你自定义 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);
                    },
                  ),

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

自定义下拉按钮和菜单项颤动

2 个答案: