从 DropdownButtonFormField 中删除下划线答案

【问题标题】：Remove underline from DropdownButtonFormField从 DropdownButtonFormField 中删除下划线
【发布时间】：2018-12-03 06:50:17
【问题描述】：

如何从 DropdownButtonFormField 中删除下划线（查看下面的照片），我尝试了各种选项组合，但 InputDecortaion 找不到任何方法。

SizedBox(
  width: 100.0,
  child: DropdownButtonFormField<int>(
    decoration: InputDecoration(
        border: UnderlineInputBorder(
            borderSide:
                BorderSide(color: Colors.white))),
    value: 2,
    items: <DropdownMenuItem<int>>[
      DropdownMenuItem<int>(
        value: 1,
        child: Text("Owner"),
      ),
      DropdownMenuItem<int>(
        value: 2,
        child: Text("Member"),
      ),
    ],
  ),

【问题讨论】：

代替边框使用enabledBorder

标签： dart flutter

【解决方案1】：

只需像这样将 DropdownButton 包裹在 DropdownButtonHideUnderline 内：

new DropdownButtonHideUnderline(
 child: DropdownButton()
)

【讨论】：

这不适用于 DropDownButtonFormField 小部件
@KrishnaKumarJangid 再次阅读。它不适用于 DropdownButtonFormField 它适用于 DropdownButton。

【解决方案2】：

将underline 属性设置为SizedBox() 也会使其不可见：

...

DropdownButton(
  underline: SizedBox(),

...

【讨论】：

这仅适用于 DropDownButton，但不适用于 DropDownButtonFormField，就像问的问题一样。

【解决方案3】：

一种方法：

在您的代码中 - 将 decoration: InputDecoration 更改为 decoration: InputDecoration.collapsed

body: SizedBox(
          width: 100.0,
          child: DropdownButtonFormField<int>(
            decoration: InputDecoration.collapsed(hintText: ''),
            value: 2,
            ...

或

在您的代码中 - 而不是 border 使用 enabledBorder: UnderlineInputBorder

DropdownButtonFormField<int>(
          decoration: InputDecoration(
              enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white))),
          value: 2,
          items: <DropdownMenuItem<int>>[
          ....

【讨论】：

DropdownButtonHideUnderline -> docs.flutter.io/flutter/material/…
在 DropdownButtonFormField 的情况下不起作用
DropdownButtonHideUnderline(child: DropdownButton() ) 又短又甜，试试这个
borderSide: BorderSide(color: Colors.white))), 中的Colors.white 更好，Colors.transparent 更好

【解决方案4】：

现在正确/干净的解决方案是使用InputBorder.none:

DropdownButtonFormField<int>(
  decoration: InputDecoration(
    enabledBorder: InputBorder.none,
    ...
  ),
  ...
)

如果您想避免在所有情况下都显示边框，您可能还想将border、focusedBorder、errorBorder 和disabledBorder 设置为InputBorder.none。

【讨论】：

【解决方案5】：

underline 可以使用一个小部件，因此，您只需为其分配一个空 Container 或 SizedBox.shrink()

                  underline:Container(),
                         -- or --
                  underline:SizedBox.shrink(),

例子：

child: DropdownButton<String>(
                  // Just have to assign to a empty Container
                  underline:Container(),
                  value: dropdownValue,
                  icon: Icon(Icons.keyboard_arrow_down),
                  iconSize: 24,
                  elevation: 16,
                  onChanged: (String newValue) {
                    setState(() {
                      dropdownValue = newValue;
                    });
                  },
                  items:[
                    deptList[0].dept,
                    deptList[1].dept,
                    deptList[2].dept,
                    deptList[3].dept,
                  ].map<DropdownMenuItem<String>>((String value) {
                    return DropdownMenuItem<String>(
                      value: value,
                      child: Text(value),
                    );
                  }).toList(),
                )

【讨论】：

underline:Container()，为DropDownButton工作，请回复DropdownbuttonFormField

【解决方案6】：

将underline: Container() 添加到您的设置中，如下所示：

SizedBox(
   ...
   underline: Container(),
),

【讨论】：

【解决方案7】：

根据这个 [Flutter Doc] 你可以这样做。只需创建一个 DropdownButtonHideUnderline 类的对象并将您当前的 DropdownButton 实现作为 DropdownButtonHideUnderline 的子级传递。就这样吧;)

DropdownButtonHideUnderline(
          child: new DropdownButton<String>(
            ......
          ),
        ),

【讨论】：

【解决方案8】：

您可以将下划线属性更改为空白或空小部件，它将像魅力检查以下属性一样工作

下划线：小部件或 SizedBox()，

例如：- 下拉按钮（图标：图标（Icons.more_vert）， isExpanded：真，值：dropValue， 下划线：小部件或 SizedBox()，

【讨论】：

【解决方案9】：

目前，DropdownButtonFormField 不支持 DropdownButtonHideUnderline。

虽然它在后台使用它来删除 DropdownButton 的下划线，但随后在其上应用了自己的装饰

为 InputBorder.none 设置边框就可以了

DropdownButtonFormField<String>(
  decoration: InputDecoration(border: InputBorder.none)
)

如果您希望边框出现错误，您可以使用

InputDecoration(
  border: InputBorder.none,
  errorBorder: UnderlineInputBorder(
    borderSide: BorderSide(color: Colors.red),
  ),
),

【讨论】：

【解决方案10】：

使用

DropdownButton<String>(
                    hint: Text("Status"),
                    value: 'Text Default',
                    isExpanded: true,
                    iconSize: 30,
                    underline: Container(
                      height: 1.0,
                      decoration: const BoxDecoration(
                          border: Border(bottom: BorderSide(color: Colors.transparent, width: 0.0))
                      ),
                    ),
...

【讨论】：

【解决方案11】：

DropdownButtonHideUnderline(
                      child: DropdownButton(
                         isExpanded: true,
                      hint: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text("Select State"),
                      ),
                      style: MyStyle().getTextStyle("x1black"),
                      items: <String>[
                        'Messaging',
                        'Chating',
                        'No Longer Interested',
                        'Document Request'
                      ].map((String value) {
                        return new DropdownMenuItem<String>(
                          value: value,
                          child: new Text(value),
                        );
                      }).toList(),
                      onChanged: (_) {},
                      ),

                    ),

【讨论】：

欢迎来到 Stack Overflow。回答问题很好，但这个答案只是格式错误的代码，没有任何解释。该代码类似于其他答案中的代码。一个好的和有用的答案有一个解释，并提供了对该主题的新见解。

【解决方案12】：

下划线需要一个小部件。传递一个空白小部件，如下所示。

DropdownButton<T>(
  value: value,
  underline: SizeBox(), // Empty box will remove underline
)

【讨论】：

【解决方案13】：

如果 DropdownButtonFormField 文本由于轮廓边框而被修剪，则使用以下代码：

DropdownButtonFormField<String>(
                              decoration: InputDecoration(
                                  enabledBorder: UnderlineInputBorder(
                                    borderSide: BorderSide(color: Colors.white)),
                                  isDense: true,)

【讨论】：

【解决方案14】：

简单的方法

DropdownButtonFormField<String>(
  decoration: InputDecoration(
    enabledBorder: UnderlineInputBorder(
    borderSide: BorderSide(color: Colors.transparent),
      ),
    ),
  ...
)

【讨论】：

【解决方案15】：

DropdownButtonFormField(
              iconSize: 30,
              decoration: InputDecoration(enabledBorder: InputBorder.none),
              hint: Text(
                "Select Duration",
                style: TextStyle(fontSize: 20),
              ),
              items: listDrop,
              onChanged: (value) {
                duration = value;
              },
            )

【讨论】：

【解决方案16】：

如果你想在所有情况下都禁用边框，你可以使用：

 DropdownButtonFormField(
                validator: _validator,
                decoration: InputDecoration(
                    border: InputBorder.none,
                 ),
                items: [],
                onChanged: (value) {}),
          ),

如果您只想在没有错误时禁用，您可以使用this

【讨论】：

【解决方案17】：

DropdownButtonHideUnderline( 孩子：按钮主题（对齐下拉：假，飞溅颜色：颜色.灰色，孩子：下拉按钮（值：_myPargna，图标大小：25，图标：图标（Icons.arrow_drop_down），风格：文本样式（字体大小：18，颜色：颜色（0xFF1f193d）），提示：行（孩子们： [ 大小框（宽度：11），文本（ '选择省份', 样式：TextStyle（颜色：Colors.grey）， ), ], ), onChanged: (String newValue) { 设置状态（（）{ _myPargna = 新值； }); }, 项目：items.map（（字符串项目）{ 返回下拉菜单项（孩子：行（孩子们： [ 大小框（宽度：12），文本（项目，样式：TextStyle（颜色：Colors.black）， ), ], ), 价值：物品， ); }).toList(), ), ), ),

【讨论】：