Question

如何从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"),
      ),
    ],
  ),

Answer 1

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

...

DropdownButton(
  underline: SizedBox(),

...

Answer 2

当今正确/清洁的解决方案是使用InputBorder.none：

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

如果您想避免边框全部显示，则可能还需要将border，focusedBorder，errorBorder和disabledBorder设置为InputBorder.none案例。

Answer 3

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

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

Answer 4

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

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

Answer 5

underline 可以带一个小部件，所以你只是给它分配了一个空的容器，或者一个 SizedBox.shrink()

iframe

示例：

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

Answer 6

一种方法：

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

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

OR

在您的代码中-代替border使用enabledBorder: UnderlineInputBorder

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

Answer 7

只需将 DropdownButton 包装在 DropdownButtonHideUnderline 内，如下所示：

新的DropdownButtonHideUnderline（子代：DropdownButton（））

Answer 8

DropdownButtonHideUnderline（子代：DropdownButton（ isExpanded：是的，提示：填充（填充：const EdgeInsets.all（8.0），子级：Text（“ Select State”），），样式：MyStyle（）。getTextStyle（“ x1black”），项目：[ “消息传递”， 'Chating'， “不再感兴趣”， “文件请求” ] .map（（String value）{ 返回新的DropdownMenuItem（价值：价值，子级：新的文本（值），）; }）。toList（）， onChanged：（_）{}，），

),

Answer 9

只需替换为此。

DropdownButtonHideUnderline(
        child: DropdownButton()
)

Answer 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))
                      ),
                    ),
...

Answer 11

下划线带一个小部件。向其传递一个空白小部件，如下所示。

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

Answer 12

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

Answer 13

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
  <thead>
    <tr>

      <th class="text-center">Building</th>
      <th class="text-center">Student ID</th>
      <th class="text-center">Student Name</th>
      <th class="text-center">Payable</th>
      <th class="text-center">Paid Amount</th>
      <th class="text-center">Due</th>
      <th class="text-center">Active</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="build-name" rowspan="3"><b>Shool 1</b></td>
      <td align="center">151-15-4366</td>
      <td align="center">Lorem Name</td>
      <td align="center">13000</td>
      <td align="center">10500</td>
      <td align="center">2500</td>
      <td align="center">True</td>
    </tr>
    <tr>
      <td align="center">151-15-4852</td>
      <td align="center">Lorem Name</td>
      <td align="center">13000</td>
      <td align="center">3000</td>
      <td align="center">10000</td>
      <td align="center">True</td>
    </tr>
    <tr>
      <td align="center">151-15-5355</td>
      <td align="center">Lorem Name</td>
      <td align="center">18000</td>
      <td align="center">3000</td>
      <td align="center">15000</td>
      <td align="center">True</td>
    </tr>
    <tr>
      <td align="center">151-15-5355</td>
      <td align="center">Lorem Name</td>
      <td align="center">18000</td>
      <td align="center">3000</td>
      <td align="center">15000</td>
      <td align="center">True</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td class="build-name" rowspan="2"><b>School 2</b></td>
      <td align="center">151-15-4841</td>
      <td align="center">Lorem Name</td>
      <td align="center">13000</td>
      <td align="center">10500</td>
      <td align="center">2500</td>
      <td align="center">True</td>
    </tr>
    <tr>
      <td align="center">151-15-4930</td>
      <td align="center">Lorem Name</td>
      <td align="center">18000</td>
      <td align="center">33000</td>
      <td align="center">-15000</td>
      <td align="center">True</td>
    </tr>

  </tbody>
</table>

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

Answer 14

到目前为止，DropdownButtonFormField不支持DropdownButtonHideUnderline。

尽管它是在引擎盖下使用它来删除DropdownButton的下划线，但是在其顶部应用了它自己的装饰

将边框设置为InputBorder。没有效果

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

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

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

Answer 15

如果 DropdownButtonFormField 文本因轮廓边框而被修剪，则使用此代码：

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

Answer 16

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

下划线：小部件，

例如：- DropdownButton（图标：Icon（Icons.more_vert）， isExpanded：是的，值：dropValue， 下划线：小部件，

从DropdownButtonFormField删除下划线

16 个答案: