如何在 Flutter 中创建“TextField”，其中标签位于 TextFields 的边框内

Question

我正在寻找一种方法来修改 Flutter 中的 TextField Widget，使其标签显示在边框中。 “TextField”是否有任何属性可以实现此目的？或者我可以实现它的任何其他方式。

我想实现这样的目标。

Answer 1

使用

labelText

中的属性

TextFormField

:

例如：

           TextFormField(
              maxLines: null,
              keyboardType: TextInputType.text,
              textCapitalization: TextCapitalization.sentences,
              decoration: InputDecoration(
                isDense: true,
                labelText: 'Label',
                labelStyle: const TextStyle(
                    color: Colors.purple,
                    fontSize: 16.0,
                    fontWeight: FontWeight.w800),
                hintText: 'Input Text',
                hintStyle: const TextStyle(
                    color: Colors.grey,
                    fontSize: 12.0,
                    fontWeight: FontWeight.w500),
                suffixIcon: IconButton(
                  onPressed: () {},
                  icon: const Icon(Icons.edit),
                ),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(8.0),
                ),
                contentPadding: const EdgeInsets.only(left: 16.0, top: 26.0),
              ),
              style: const TextStyle(
                  color: Colors.black,
                  fontSize: 16.0,
                  fontWeight: FontWeight.w800),
            ),

实现它的另一种方法是在带边框的容器内有一个

Column

的标题文本和文本字段。例如：

  Container(
      margin: const EdgeInsets.all(10.0),
      padding: const EdgeInsets.all(10.0),
      decoration: BoxDecoration(
        border: Border.all(
          color: const Color(0xFF5801E4),
          width: 5.0,
        ),
        color: Colors.white,
      ),
      child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text('Label',
                style: TextStyle(
                  color: Colors.purple,
                  fontSize: 16.0,
                  fontWeight: FontWeight.w800,
                )),
            TextFormField(
              maxLines: null,
              keyboardType: TextInputType.text,
              textCapitalization: TextCapitalization.sentences,
              decoration: InputDecoration(
                isDense: true,
                labelStyle: const TextStyle(
                    color: Colors.purple,
                    fontSize: 16.0,
                    fontWeight: FontWeight.w800),
                hintText: 'Input Text',
                hintStyle: const TextStyle(
                    color: Colors.grey,
                    fontSize: 12.0,
                    fontWeight: FontWeight.w500),
                suffixIcon: IconButton(
                  onPressed: () {},
                  icon: const Icon(Icons.edit),
                ),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(8.0),
                ),
                contentPadding: const EdgeInsets.only(left: 16.0, top: 26.0),
              ),
              style: const TextStyle(
                  color: Colors.black,
                  fontSize: 16.0,
                  fontWeight: FontWeight.w800),
            ),
          ]),
    );