如何为Flutter中的下拉菜单设置动态高度

时间:2019-08-05 08:02:31

标签: flutter flutter-layout

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

                 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(),
                  ),
                ),);

enter image description here

2 个答案:

答案 0 :(得分:5)

按照其他人的建议复制DropdownMenuItem类是不够的,因为DropdownButton要求items的类型为List<DropdownMenuItem<T>>

我创建了以下窗口小部件,该窗口小部件可以帮助您解决问题:

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相同。

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

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

通过修改此类以使用super()为null的方式调用initialValue,或者最好向构造函数添加一个布尔值以从外部进行控制,您应该能够禁用突出显示。 / p>

答案 1 :(得分:0)

<?php // Create connection //$message = "In funtion codelookup"; //echo "<script type='text/javascript'>alert('$message');</script>"; include 'mysqlinit.php'; // Check connection // get the q parameter from URL $code1 = ""; $name1 = "NOTFOUND"; if (isset($_GET['code'])) { $code1 = $_GET['code']; $sql = "SELECT * FROM `pcomp` where Code = '$code1'"; //$sql1 = 'SELECT * FROM `pcomp` WHERE `Code` = "H413"'; //echo "SQL = $sql"; //echo "code = $code1"; $result = mysqli_query($conn, $sql); //echo "result = $result1"; if (mysqli_num_rows($result) > 0) { // output data of each row while($row = mysqli_fetch_assoc($result)) { $name1 = $row["Name"]; $name1 = trim ( $name1, [ string $character_mask = " \t\n\r\0\x0B" ] ) } } else { $name1 = "NOTFOUND"; } mysqli_close($conn); if (empty($name1)){ $name1 = "NOTFOUND"; } } else { $name1 = "NOTFOUND"; } echo $name1; ?> 的高度被硬编码为

https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/dropdown.dart#L486

您唯一可以做的就是复制整个文件并根据需要进行调整。