【问题标题】: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,
    ...
  ),
  ...
)

如果您想避免在所有情况下都显示边框,您可能还想将borderfocusedBordererrorBorderdisabledBorder 设置为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(), ), ), ),

                        【讨论】:

                          猜你喜欢
                          • 2019-11-25
                          • 2011-04-26
                          • 1970-01-01
                          • 2015-11-10
                          • 2018-08-24
                          • 2023-03-17
                          • 1970-01-01
                          • 1970-01-01
                          • 1970-01-01
                          相关资源
                          最近更新 更多