如何将 labelText 放置在文本字段内？

Question

我想将标签文本移动到该topLeft位置。

从这，到这。

代码：

Container buildPendingPageTextField() {
return Container(
  alignment: Alignment.topLeft,
  width: MediaQuery.of(context).size.width,
  child: TextField(
    textAlign: TextAlign.start,
    controller: attendanceBloc.refusedReasonController,
    textInputAction: TextInputAction.done,
    maxLines: 3,
    minLines: 3,
    scrollPhysics: ScrollPhysics(),
    style: TextStyle(
      height: 1,
      fontSize: 15,
      letterSpacing: -0.5,
    ),
    decoration: InputDecoration(
      errorText: attendanceBloc.error.value,
      floatingLabelBehavior: FloatingLabelBehavior.never,
      labelText: "Descreva aqui o motivo",
      labelStyle: TextStyle(),
      border: const OutlineInputBorder(
        borderSide: BorderSide(
          color: Colors.grey,
          width: 0.3,
        ),
      ),
    ),
  ),
);

}

我尝试过在容器上对齐。上inputDecoration，甚至上textStyle，都没有成功。

Answer 1

alignLabelWithHint 属性

当 InputDecorator 包含多行 TextField（TextField.maxLines 为 null 或 > 1）时，通常设置为 true 以覆盖将标签与 TextField 中心对齐的默认行为。

您应该设置alignLabelWithHint为 true 以覆盖将标签与中心对齐的默认行为：

decoration: InputDecoration(
  errorText: attendanceBloc.error.value,
  floatingLabelBehavior: FloatingLabelBehavior.never,
  labelText: "Descreva aqui o motivo",
  labelStyle: TextStyle(),
  alignLabelWithHint: true, // Insert this line
  border: OutlineInputBorder(
     borderSide: BorderSide(
     color: Colors.grey,
     width: 0.3,
   ),
  ),
),