聚焦时对齐TextField的labelText答案

【问题标题】：Align labelText of TextField when focused聚焦时对齐TextField的labelText
【发布时间】：2020-08-28 08:04:48
【问题描述】：

labelText 属性 https://api.flutter.dev/flutter/material/InputDecoration/labelText.html 当文本字段被聚焦并且你有这样的 Inputdecoration 时向上移动：

InputDecoration(
  labelText: labelText,
  filled: true,
  enabledBorder: OutlineInputBorder(
    borderSide: const BorderSide(
      color: ImpexColors.grey,
      width: 1.0,
    ),
  ),
  focusedBorder: OutlineInputBorder(
    borderSide: const BorderSide(
      color: ImpexColors.secondaryColor,
      width: 2.0,
    ),
  ),
  labelStyle: TextStyle(
    color: ImpexColors.blue,
  ),
)

然后在上边框的中间对齐。当TextField被聚焦时，是否有可能改变labelText的位置？

【问题讨论】：

标签： flutter textfield

【解决方案1】：

这可能吗，孩子？

  FocusNode myFocusNode = FocusNode();
  ...
  TextFormField(
      focusNode: myFocusNode,
      decoration: InputDecoration(
        labelStyle: TextStyle(
          height: myFocusNode.hasFocus ? 0.1 : 1, // 0,1 - label will sit on top of border
        ),
        labelText: labelText,
  ...
      ));

还需要补充：

onTap: () =>  setState(() {FocusScope.of(context).requestFocus(myFocusNode);})

【讨论】：