首页 > 解决方案 > Flutter - 显示光标/克拉而不关注文本字段

问题描述

我正在从另一个小部件控制EditableText小部件的内容,但我想显示光标 - 但如果不给文本字段焦点,这似乎是不可能的。

这是代码中的一些示例 - Widget1 需要焦点。

父小部件(使用 Animated Builder 重建第二个小部件)

class ParentWidget extends StatefulWidget {
  @override
  _ParentWidgetState createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidgetScreen> {
  late ValueNotifier<String> email = ValueNotifier<String>('');

  @override
    void dispose() {
      email.dispose();
    }

  @override
  Widget build(BuildContext context) {
    return Row(
        children: [
          Widget1(
            onChanged: (value){
              if(value != null){
                String newEmailValue = value['email']!;
                email.value = newEmailValue;
              }
              
            },
          ),
          AnimatedBuilder(
            animation: Listenable.merge([email]),
            builder: (BuildContext context, _){
            return Widget2(
                email: email.value,
              );
            }
          ),
        ],
      ),
  }
}

第二个小部件:

class Widget2 extends StatefulWidget {
  final String email;
  const Widget2({
    required this.email,
   });

  @override
  _Widget2State createState() => _Widget2State();
}

class _Widget2State extends State<Widget2> {
  final TextEditingController _email = TextEditingController();
  FocusNode _nodeEmail = FocusNode();
  
  @override
  Widget build(BuildContext context) {
     _email.value = _email.value.copyWith( //Everytime "email" updates - this is rebuilt
        text: widget.email,
        selection: TextSelection.collapsed(offset: widget.emailSelectionOffset),
      );
    return EditableText(
                controller: _email,
                autofocus: true,
                focusNode: _nodeEmail,
                cursorColor: Colors.white,
                backgroundCursorColor: Colors.white,
                style: TextStyle(color: Colors.white),
                readOnly: true,
                showCursor: true,
              ),
  }
}

标签: flutter

解决方案


推荐阅读