如何在颤动中为下拉弹出窗口设置动态高度 [英] How to set dynamic height for dropdown popup in flutter

问题描述

我是 Flutter 开发的新手.我正在使用我的应用程序的下拉按钮.打开下拉菜单时，弹出对话框中的文本被剪切.下面我附上了带有编码的屏幕截图.请指导我解决此问题.

I am new to flutter development. I am using the dropdown button of my application. When opening the drop-down menu, the text is getting cut in the popup dialog. Below I attached a screenshot with coding. Please guide me in fixing this issue.

                 DropdownButtonHideUnderline(
                  child: new DropdownButton(
                    isExpanded: true,
                    value: dropDownValue,
                    isDense: true,
                    //icon: Icon(Icons.keyboard_arrow_down, color: Colors.white,),
                    onChanged: (String newValue) {
                      setState(() {
                        dropDownValue = newValue;

                        state.didChange(newValue);
                      });
                    },
                    items: dropDownList.map((String value) {
                      return new DropdownMenuItem(

                        value: value,
                          child: new SizedBox(
                          width: MediaQuery.of(context).size.width / 1.4,
                          child: new Text(value,
                          softWrap: true,
                          style: TextStyle(color: Colors.white, fontSize: 18.0),),)
                      );
                    }).toList(),
                  ),
                ),);

推荐答案

按照别人的建议复制 DropdownMenuItem 类是不够的，因为 DropdownButton 需要 items 为 List> 类型.

Copying the DropdownMenuItem class as someone else suggested will not be enough as DropdownButton requires items to be of type List<DropdownMenuItem<T>>.

我创建了以下小部件，应该可以帮助您解决问题:

I have created the following widget which should help with your issue:

import 'package:flutter/material.dart';

/// Looks like a DropdownButton but has a few differences:
///
/// 1. Can be opened by a single tap even if the keyboard is showing (this might be a bug of the DropdownButton)
///
/// 2. The width of the overlay can be different than the width of the child
///
/// 3. The current selection is highlighted in the overlay
class CustomDropdown<T> extends PopupMenuButton<T> {
  CustomDropdown({
    Key key,
    @required PopupMenuItemBuilder<T> itemBuilder,
    @required T selectedValue,
    PopupMenuItemSelected<T> onSelected,
    PopupMenuCanceled onCanceled,
    String tooltip,
    double elevation = 8.0,
    EdgeInsetsGeometry padding = const EdgeInsets.all(8.0),
    Icon icon,
    Offset offset = Offset.zero,
    Widget child,
    String placeholder = "Please select",
  }) : super(
    key: key,
    itemBuilder: itemBuilder,
    initialValue: selectedValue,
    onSelected: onSelected,
    onCanceled: onCanceled,
    tooltip: tooltip,
    elevation: elevation,
    padding: padding,
    icon: icon,
    offset: offset,
    child: child == null ? null : Stack(
      children: <Widget>[
        Builder(
          builder: (BuildContext context) => Container(
            height: 48,
            alignment: AlignmentDirectional.centerStart,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                DefaultTextStyle(
                  style: selectedValue!= null ? Theme.of(context).textTheme.subhead
                      : Theme.of(context).textTheme.subhead.copyWith(color:     
Theme.of(context).hintColor),
                  child: Expanded(child: selectedValue== null ? Text(placeholder) : child),
                ),
                IconTheme(
                  data: IconThemeData(
                    color: Theme.of(context).brightness == Brightness.light
                        ? Colors.grey.shade700 : Colors.white70,
                  ),
                  child: const Icon(Icons.arrow_drop_down),
                ),
              ],
            ),
          ),
        ),
        Positioned(
          left: 0.0,
          right: 0.0,
          bottom: 8,
          child: Container(
            height: 1,
            decoration: const BoxDecoration(
              border: Border(bottom: BorderSide(color: Color(0xFFBDBDBD), width: 0.0)),
            ),
          ),
        ),
      ],
    ),
  );
}

如您所见，它实际上扩展了 PopupMenuButton，但我让它看起来与 DropdownButton 相同.

It actually extends PopupMenuButton as you can see, but I've made it look the same as the DropdownButton.

itemBuilder 需要返回 List<PopupMenuEntry<T>>，每个条目通常是一个 PopupMenuItem，您可以向其中提供任何child 小部件.

itemBuilder needs to return List<PopupMenuEntry<T>>, with each entry usually being a PopupMenuItem to which you can provide any child widget.

selectedValue 是当前选择的值，将在叠加层中突出显示.如果为空，则显示带有 placeholder 字符串的 Text 小部件.如果它不为 null，则显示 child 小部件.

selectedValue is the currently selected value, which will be highlighted in the overlay. If it is null, a Text widget with the placeholder string is shown. If it is not null, the child widget is shown.

您应该能够通过修改这个类来禁用突出显示，以使用 null 的 initialValue 调用 super()，或者更好地向构造函数添加一个布尔值从外部控制它.

You should be able to disable the highlight by modifying this class to either call super() with an initialValue of null, or even better add a boolean to the constructor to control this from the outside.

这篇关于如何在颤动中为下拉弹出窗口设置动态高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！