Flutter 在容器内的TextFormField中设置游标

我有一个容器，它有一个文本字段（一个

TextFormField

的实例）和一个边框（可选）。当我单击容器上的任意位置时，我需要将焦点设置在容器内的文本字段上。因此，我在文本字段中添加了一个

FocusNode

实例

现在我需要给容器的边框上色。逻辑是，如果点击容器，它应该是彩色的，并且光标应该在文本字段中闪烁。否则，文本字段中不应有边框和光标

但是，我需要单击两次以将光标设置在文本字段内。如果永久删除边框，只需单击一下即可设置光标。我正在努力找出我做错了什么

代码如下

import 'package:flutter/material.dart';

class TextInputCard extends StatefulWidget {
  TextInputCard({ Key key }) : super(key: key);

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

class _TextInputCardState extends State<TextInputCard> {
  FocusNode _inputFocusNode = FocusNode();

  Color boarderColor;

  void _onFocusChange() {
    setState(() {
      if (_inputFocusNode.hasFocus) {
        boarderColor = Colors.black;
      } else {
        boarderColor = null;
      }
    });
  }

  Widget _buildInput() {
    return Container(
      child: Padding(
        padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
        child: TextFormField(
          focusNode: _inputFocusNode,
          decoration: InputDecoration(
            contentPadding: EdgeInsets.fromLTRB(10, 10, 10, 10),
            labelText: "Test Label",
          ),
          style: TextStyle(
            fontSize: 16.0,
          ),
        ),
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    _inputFocusNode.addListener(_onFocusChange);
  }

  @override
  void dispose() {
    _inputFocusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {

    return GestureDetector(
      onTap: () => _inputFocusNode.requestFocus(),
      child: Container(
        margin: EdgeInsets.fromLTRB(0, 0, 0, 0),
        child: Container(
          decoration: boarderColor != null
              ? BoxDecoration(
                  border: Border.all(
                    color: boarderColor,
                    width: 2.0,
                    style: BorderStyle.solid,
                  ),
                  borderRadius: BorderRadius.circular(10.0),
                )
              : null,
          child: Card(
            margin: const EdgeInsets.all(0),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10.0),
            ),
            child: Padding(
              padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
              child: Stack(
                children: <Widget>[
                  _buildInput(),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
类TextInputCard扩展StatefulWidget{
TextInputCard（{Key}）：超级（Key:Key）；
@凌驾
_TextInputCardState createState（）=>\u TextInputCardState（）；
}
类_TextInputCardState扩展状态{
FocusNode_inputFocusNode=FocusNode（）；
色板颜色；
void _onFocusChange（）{
设置状态（）{
if（_inputFocusNode.hasFocus）{
boarderColor=颜色。黑色；
}否则{
boarderColor=null；
}
});
}
小部件_buildInput（）{
返回容器(
孩子：填充(
填充：从LTRB（10,10,10,10）开始的边缘设置，
子项：TextFormField(
focusNode:_inputFocusNode，
装饰：输入装饰(
contentPadding:EdgeInsets.fromLTRB（10,10,10,10），
labelText:“测试标签”，
),
样式：TextStyle(
字体大小：16.0，
),
),
),
);
}
@凌驾
void initState（）{
super.initState（）；
_inputFocusNode.addListener（_onFocusChange）；
}
@凌驾
无效处置（）{
_inputFocusNode.dispose（）；
super.dispose（）；
}
@凌驾
小部件构建（构建上下文）{
返回手势检测器(
onTap:（）=>\u inputFocusNode.requestFocus（），
子：容器(
边距：从LTRB（0,0,0,0）开始的边距集，
子：容器(
装饰：boarderColor！=空
？盒子装饰(
边界：边界(
颜色：boarderColor，
宽度：2.0，
样式：BorderStyle.solid，
),
边界半径：边界半径。圆形（10.0），
)
：null，
孩子：卡片(
边距：常数边集全部（0），
形状：圆形矩形边框(
边界半径：边界半径。圆形（10.0），
),
孩子：填充(
填充：从LTRB（10,10,10,10）开始的边缘设置，
子：堆栈(
儿童：[
_buildInput（），
],
),
),
),
),
),
);
}
}

我不完全确定为什么会发生这种情况，但问题是因为边框是可选的。当我始终保持边框（在我不需要时使其透明）时，它就像一个符咒

所以我改变了focuschange方法，如下所示

  void _onFocusChange() {
    setState(() {
      if (_inputFocusNode.hasFocus) {
        boarderColor = Colors.black;
      } else {
        boarderColor = Colors.transparent;
      }
    });
  }

希望这有帮助：-）