FormBuilder下拉项样式

问题描述 投票:0回答:1

我正在尝试删除下拉列表内的垂直填充并更改所选项目突出显示的边框半径。我正在使用 flutter_form_builder 包。

这是我当前的代码:

  FormBuilderDropdown<Experience>(
                       name: 'experience',
                        icon: AppIcon(
                          PhosphorIconsRegular.caretDown,
                          color: context.colorScheme.iconSecondary,
                        ),
                        elevation: 4,
                        style: context.textTheme.text14Regular,
                        decoration: InputDecoration(
                          border: OutlineInputBorder(
                            borderSide: BorderSide(
                              color: context.colorScheme.borderPrimary,
                            ),
                            borderRadius: BorderRadius.circular(borderRegular),
                          ),
                          focusedBorder: OutlineInputBorder(
                            borderSide: BorderSide(
                              color: context.colorScheme.borderPrimary,
                            ),
                            borderRadius: BorderRadius.circular(borderRegular),
                          ),
                          enabledBorder: OutlineInputBorder(
                            borderSide: BorderSide(
                              color: context.colorScheme.borderPrimary,
                            ),
                            borderRadius: BorderRadius.circular(borderRegular),
                          ),
                          isDense: true,
                        ),
                        items: Experience.values
                            .take(Experience.values.length - 1)
                            .map(
                              (experience) => DropdownMenuItem(
                                value: experience,
                                child: Container(
                                  padding: EdgeInsets.zero,
                                  child: Text(
                                    context.l10n.experiences_600(experience.name),
                                  ),
                                ),
                              ),
                            )
                            .toList(),
),

这就是它的样子带有填充的下拉菜单

这就是我想要的视觉效果: 预期下拉

我尝试更改主题,我尝试用容器包装我的项目并更改其填充,但它在视觉上没有改变任何内容。我也尝试过直接用 Padding 小部件包装它,但它也不起作用。当我搜索解决方案时,我发现解决方案不适用于此包,并且我将其用于应用程序中的所有表单,因此如果可能的话,我想保留它。

flutter padding border-radius flutter-form-builder
1个回答
0
投票

InputDecoration 有一个 contentPadding 属性。我会将其分配给 EdgeInsets.zero 并查看是否有效。问题似乎是默认填充需要设置为zero。 这是 flutter_form_builder 自述文件中的示例:

InputDecorator(
  decoration: InputDecoration(
    labelText: "Select option",
    contentPadding: EdgeInsets.only(top: 10.0, bottom: 0.0), // Change to EdgeInsets.zero
    border: InputBorder.none,
    errorText: field.errorText,
  ),
  child: Container(
    height: 200,
    child: CupertinoPicker(
      itemExtent: 30,
      children: options.map((c) => Text(c)).toList(),
      onSelectedItemChanged: (index) {
        field.didChange(options[index]);
      },
    ),
  ),
);
© www.soinside.com 2019 - 2024. All rights reserved.