[英]Clickable icon on TextFormField - disable TextFormField focus on icon click (Flutter)
Container(
child: Stack(
alignment: Alignment.centerRight,
children: <Widget>[
TextField(),
IconButton(
icon: Icon(Icons.image),
onPressed: () {
// do something
},
),
],
),
)
Tested and confirmed, exactly what u want.经过测试和确认,正是您想要的。
Stack(
alignment: Alignment.centerRight,
children: <Widget>[
TextField(
keyboardType: TextInputType.text,
style: Theme.of(context).textTheme.body1,
obscureText: true,
decoration: InputDecoration(
labelText: 'Password',
contentPadding: const EdgeInsets.fromLTRB(6, 6, 48, 6), // 48 -> icon width
),
),
IconButton(
icon: Icon(Icons.dialpad, color: const Color(0xfff96800)),
onPressed: () {
FocusScope.of(context).requestFocus(FocusNode());
// Your codes...
},
),
],
),
There is one more possible fix for this issue - taken from here: https://github.com/flutter/flutter/issues/39376 - use the standard TextField with a button as suffixIcon and then, the magic trick:这个问题还有一个可能的解决方法 - 取自这里: https://github.com/flutter/flutter/issues/39376 - 使用带有按钮的标准 TextField 作为 suffixIcon 然后,魔术:
InputDecoration(labelText: "Email address",
border: OutlineInputBorder(),
suffixIcon: IconButton(
iconSize: 40,
icon: Icon(Icons.fingerprint),
onPressed: () async {
focusNode.unfocus();
focusNode.canRequestFocus = false;
await performBiometricLogin();
focusNode.canRequestFocus = true;
},
),
),
Two things that you have to be aware in this case:在这种情况下,您必须注意两件事:
a) declare focusNode in your widget (I'm doing it in the state class of my statefull widget) and then use it for your textfield: a)在您的小部件中声明 focusNode(我在我的 statefull 小部件的 state class 中这样做),然后将其用于您的文本字段:
FocusNode focusNode = FocusNode();
and in the TextField use the property called focusNode:并在 TextField 中使用名为 focusNode 的属性:
focusNode: focusNode,
b) if you don't do any async operation in the onPressed event handler, then you have to follow exactly the logic from the github issue - enable canRequestFocus after some time: b) 如果您没有在 onPressed 事件处理程序中执行任何异步操作,那么您必须完全遵循 github 问题中的逻辑 - 一段时间后启用 canRequestFocus:
Future.delayed(Duration(milliseconds: 100), () {
widget.textFieldFocusNode.canRequestFocus = true;
});
Hopefully it will help others as it helped me.希望它能帮助其他人,因为它帮助了我。
Thanks.谢谢。
Click and not open the keyboard?单击而不打开键盘? If so, just create a class and assign it to focusNode
, setting hasFocus
to false
, like this:如果是这样,只需创建一个 class 并将其分配给focusNode
,将hasFocus
设置为false
,如下所示:
class AlwaysDisabledFocusNode extends FocusNode {
@override
bool get hasFocus => false;
}
new TextField(
focusNode: AlwaysDisabledFocusNode(),
onTap: () {},
keyboardType: TextInputType.text,
decoration: InputDecoration(
border: InputBorder.none,
icon: Icon(Icons.apps),
hintText: 'Password'),
style: Theme.of(context).textTheme.body1,
),
With readOnly: true
it changes icon color on click使用readOnly: true
它会在单击时更改图标颜色
new TextField(readOnly: true,
//focusNode: AlwaysDisabledFocusNode(),
onTap: () {},
keyboardType: TextInputType.text,
decoration: InputDecoration(
border: InputBorder.none,
icon: Icon(Icons.apps),
hintText: 'Password'),
style: Theme.of(context).textTheme.body1,
),
I think then you have to put a Row
with a TextField
and an IconButton
, with separate actions.我认为你必须放置一个带有TextField
和IconButton
的Row
,并带有单独的操作。
new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Expanded(
child: Padding(
child: new TextField(
onTap: () {//action of TextField
},
keyboardType: TextInputType.text,
decoration: InputDecoration(
border: InputBorder.none, hintText: 'Password'),
style: Theme.of(context).textTheme.body1,
),
padding: EdgeInsets.only(left: 40),
)),
IconButton(
icon: Icon(Icons.apps),
onPressed: () {//action of iconbutton
},
)
],
)
I have achieved the same thing我也取得了同样的成就
Container(
height: 40,
child: Stack(
children: <Widget>[
TextField(
controller: textEditingController,
keyboardType: TextInputType.text,
decoration: InputDecoration(
prefixIcon: Icon(HelageeIcons.search_icon_of_search_box),
border: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xff575656),
),
borderRadius: const BorderRadius.all(
const Radius.circular(50.0),
),
),
hintStyle:
TextStyle(color: Color(0xffADADAC), fontSize: 14),
hintText: "Quick Search",
),
),
Positioned(
right: 0,
child: Container(
height: 40,
width: 40,
child: Container(
child: Material(
shape: CircleBorder(),
color: Colors.transparent,
child: InkWell(
customBorder: CircleBorder(),
onTap: () {},
splashColor: Colors.grey,
child: Icon(Icons.keyboard))),
),
),
),
],
),
),
Use readOnly
, don't use enabled
.使用readOnly
,不要使用enabled
。
add suffix icon and suffix icon click on text filed, in my case I have used as below添加后缀图标和后缀图标单击文本字段,在我的情况下,我使用如下
TextFormField(
textInputAction: TextInputAction.done,
maxLines: 1,
obscureText: _obscureText,
autofocus: false,
focusNode: _passwordFocus,
style: TextStyle(fontSize: 17.0, color: Colors.black),
onFieldSubmitted: (term) {
_passwordFocus.unfocus();
_validateAndSubmit();
},
decoration: InputDecoration(
hintText: HINT_PASSWORD,
hintStyle: TextStyle(fontSize: 17.0, color: Colors.black54),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black87),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
),
disabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black87),
),
focusedErrorBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
),
labelText: HINT_PASSWORD,
labelStyle: TextStyle(fontSize: 17.0, color: Colors.black),
errorStyle: TextStyle(fontSize: 12.0, color: Colors.red),
prefixIcon: Icon(
Icons.lock,
color: themeColor,
),
/// magic is here suffix ixon click
suffixIcon: IconButton(
icon: Icon(
// Based on passwordVisible state choose the icon
_obscureText ? Icons.visibility : Icons.visibility_off,
color: themeColor,
),
onPressed: () {
// Update the state i.e. toogle the state of passwordVisible variable
setState(() {
_obscureText ? _obscureText = false : _obscureText = true;
});
},
),
),
validator: validatePassword,
onSaved: (value) => _password = value,
)
This should work这应该工作
Stack(
alignment: Alignment.centerRight,
children: <Widget>[
TextFormField(
),
FlatButton(
onPressed: () {
_openOrhidePassword();
},
child: Image(
height: 24.0,
width: 24.0,
image: AssetImage('images/Eye.png'),
),
),
],
),
In my case image size was another problem.在我的情况下,图像大小是另一个问题。 When I provided the dimension it worked well with other widget.当我提供尺寸时,它与其他小部件配合得很好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.