从 DropdownButtonFormField 中删除下划线
Posted
技术标签:
【中文标题】从 DropdownButtonFormField 中删除下划线【英文标题】：Remove underline from DropdownButtonFormField 【发布时间】：2018-12-03 06:50:17 【问题描述】：如何（查看下面的照片），我尝试了各种选项组合，但 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 【参考方案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(), ), ), ),
【讨论】：
以上是关于从 DropdownButtonFormField 中删除下划线的主要内容，如果未能解决你的问题，请参考以下文章
TextFormField 输入文本溢出与 DropdownButtonFormField, Flutter