英文:
FloatingLabelBehavior auto not working on InputDecorator Flutter
问题
我想使用InputDecorator
来装饰TextFormField
。当我使用TextFormField(label: Text('Email'))
时,当输入框聚焦或有内容时,标签会浮动。但是当我像下面这样使用InputDecorator
时,它没有相同的行为。
Widget build(BuildContext context) {
return InputDecorator(
decoration: InputDecoration(
label: Text('Email'),
floatingLabelBehavior: FloatingLabelBehavior.auto,
suffixIcon: IconButton(
onPressed: toggleVisibility,
icon: Icon(obscureText ? Icons.visibility_off : Icons.visibility),
),
),
child: TextFormField(),
);
}
英文:
I want to use InputDecorator
to decorate TextFormField
. When I use TextFormField(label: Text('Email'))
the label floats when the input is focused or has content. But when I use InputDecorator
like below, it doesn't have the same behavior.
Widget build(BuildContext context) {
return InputDecorator(
decoration: InputDecoration(
label: Text('Email'),
floatingLabelBehavior: FloatingLabelBehavior.auto,
suffixIcon: IconButton(
onPressed: toggleVisibility,
icon: Icon(obscureText ? Icons.visibility_off : Icons.visibility),
),
),
child: TextFormField(),
);
}
答案1
得分: 0
标签的动画没有运行,因为它需要焦点和isEmpty状态。这是我的解决方案
class InputPassword {
final Widget? label;
final String? hintText;
final bool enabled;
InputPassword(
{super.key,
this.label,
this.hintText,
bool? enabled})
: enabled = enabled ?? true;
@override
State<InputPassword> createState() => _InputPasswordState();
}
class _InputPasswordState extends State<InputPassword> {
// 添加焦点节点和文本编辑控制器
final FocusNode _focusNode = FocusNode();
final TextEditingController _controller = TextEditingController();
@override
void initState() {
super.initState();
_focusNode.addListener(_onFocus);
}
@override
void dispose() {
super.dispose();
_focusNode.removeListener(_onFocus);
_focusNode.dispose();
}
void toggleVisibility() {
setState(() {
super.obscureText = !obscureText;
});
}
void _onFocus() {
print('是否聚焦: ${_focusNode.hasFocus}');
}
@override
Widget build(BuildContext context) {
return Focus(
focusNode: _focusNode,
child: AnimatedBuilder(
animation: Listenable.merge(<Listenable>[_focusNode, _controller]),
builder: (BuildContext context, Widget? child) {
return InputDecorator(
decoration: InputDecoration(
enabled: widget.enabled,
label: widget.label,
hintText: widget.hintText,
floatingLabelBehavior: FloatingLabelBehavior.auto,
suffixIcon: IconButton(
onPressed: toggleVisibility,
icon:
Icon(obscureText ? Icons.visibility_off : Icons.visibility),
),
),
isFocused: _focusNode.hasFocus,
isEmpty: _controller.value.text.isEmpty,
// expands: widget.expands,
child: child,
);
},
child: TextField(),
),
);
}
}
英文:
Animate of Label not running because it needs Focus and isEmpty state. This is my solution
class InputPassword {
final Widget? label;
final String? hintText;
final bool enabled;
InputPassword(
{super.key,
this.label,
this.hintText,
bool? enabled})
: enabled = enabled ?? true;
@override
State<InputPassword> createState() => _InputPasswordState();
}
class _InputPasswordState extends State<InputPassword> {
// Add focus node and text editing controller
final FocusNode _focusNode = FocusNode();
final TextEditingController _controller = TextEditingController();
@override
void initState() {
super.initState();
_focusNode.addListener(_onFocus);
}
@override
void dispose() {
super.dispose();
_focusNode.removeListener(_onFocus);
_focusNode.dispose();
}
void toggleVisibility() {
setState(() {
super.obscureText = !obscureText;
});
}
void _onFocus() {
print('Is Focus: ${_focusNode.hasFocus}');
}
@override
Widget build(BuildContext context) {
return Focus(
focusNode: _focusNode,
child: AnimatedBuilder(
animation: Listenable.merge(<Listenable>[_focusNode, _controller]),
builder: (BuildContext context, Widget? child) {
return InputDecorator(
decoration: InputDecoration(
enabled: widget.enabled,
label: widget.label,
hintText: widget.hintText,
floatingLabelBehavior: FloatingLabelBehavior.auto,
suffixIcon: IconButton(
onPressed: toggleVisibility,
icon:
Icon(obscureText ? Icons.visibility_off : Icons.visibility),
),
),
isFocused: _focusNode.hasFocus,
isEmpty: _controller.value.text.isEmpty,
// expands: widget.expands,
child: child,
);
},
child: TextField(),
),
);
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论