FloatingLabelBehavior在Flutter的InputDecorator上自动工作不正常。

huangapple go评论78阅读模式
英文:

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&lt;InputPassword&gt; createState() =&gt; _InputPasswordState();
}

class _InputPasswordState extends State&lt;InputPassword&gt; {
  // 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(&#39;Is Focus: ${_focusNode.hasFocus}&#39;);
  }

  @override
  Widget build(BuildContext context) {
    return Focus(
      focusNode: _focusNode,
      child: AnimatedBuilder(
        animation: Listenable.merge(&lt;Listenable&gt;[_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(),
      ),
    );
  }
}

huangapple
  • 本文由 发表于 2023年8月9日 00:46:01
  • 转载请务必保留本文链接:https://go.coder-hub.com/76861633.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定