Question

我的flutter应用程序中有一个下拉列表，其中包含约30个项目。选择它时，我会看到这些值，但它会占据整个屏幕。

如何控制所选列表的高度，以使其不覆盖整个屏幕（可能滚动显示10个项目）

这是我的代码

 Widget buildCategoryFormField(candidateModel) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text("Job category"),
        SizedBox(
          height: 5,
        ),
        FormField(
          builder: (FormFieldState state) {
            return InputDecorator(
              decoration: InputDecoration(
                border: OutlineInputBorder(
                  borderSide: BorderSide(
                    color: Colors.grey,
                  ),
                ),
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                    color: Colors.grey,
                  ),
                ),
                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                    color: Colors.blue,
                  ),
                ),
                // hintText: "firstname *",
                // labelText: "job category",
                errorText: state.hasError ? state.errorText : null,
                labelStyle: TextStyle(
                  color: Colors.grey,
                ),
              ),
              isEmpty: _selectedjobCategory == '',
              child: new DropdownButtonHideUnderline(
                child: new DropdownButton(
                  style: TextStyle(fontSize: 18, color: Palette.GREY),
                  value: _selectedjobCategory,
                  isDense: true,
                  onChanged: (String newValue) {
                    setState(() {
                      _selectedjobCategory = newValue;
                      state.didChange(newValue);
                    });
                  },
                  items: JOB_CATEGORY.map((String value) {
                    return new DropdownMenuItem(
                      value: value,
                      child: new Text(value),
                    );
                  }).toList(),
                ),
              ),
            );
          },
          validator: (val) => validateJobCategory(val),
        ),
      ],
    );
  }

Answer 1

您可以在 menuMaxHeight 上定义 DropdownButton 以设置展开的下拉列表项的最大高度。

Expanded(
  /// LayoutBuilder can be used to fetch the parent widget's dimensions
  child: LayoutBuilder(builder: (context, constraints) {
    return Center(
      child: DropdownButton<String>(
        /// Set dropdown list max height
        menuMaxHeight: constraints.maxHeight,
        value: dropdownValue,
        items: dropdownItems,
      ),
    );
  }
)

向下拉列表添加分页是可行的，但这需要创建自定义 DropdownButton 类。在设计方面，如果您需要在下拉列表中显示超过 50 个项目，最好将列表分成更小的块（即按类别）。

Flutter：如何在Flutter中设置下拉菜单的高度

1 个答案: