Flutter：在更大的容器中对齐 TextField 文本

Question

我可以毫无问题地将提示文本与中心对齐，但是当用户开始在文本框中键入内容时，我似乎无法将其与中心对齐。

当 maxLines 设置为 1 时，没有问题，但当它设置为大于 1（或在我的情况下为 null）时，它似乎默认对齐到顶部。

Screenshot1

Screenshot2

有什么办法可以纠正这个问题吗？

                             Container(
                                width: screenWidth / 1.2,
                                height: 120,
                                padding:
                                    EdgeInsets.symmetric(horizontal: 0),
                                child: TextField(
                                  // autofocus: false,
                                  controller: postText,
                                  keyboardType: TextInputType.text,
                                  maxLines: 10,
                                  textAlign: TextAlign.center,
                                  textAlignVertical:
                                      TextAlignVertical.center,
                                  style: TextStyle(
                                    fontFamily: 'Michroma',
                                    color: selectedFont,
                                    fontSize: 12, // 12
                                  ),
                                  decoration: InputDecoration(
                                    hintText: '\n\nType  away !   :\n\n\n',
                                    hintStyle: TextStyle(
                                      color: fontColour,
                                      fontFamily: 'Michroma',
                                      fontWeight: FontWeight.bold,
                                      fontSize: 12,
                                    ),
                                    filled: true,
                                    fillColor: screenColour,
                                    contentPadding: EdgeInsets.symmetric(
                                      vertical: 8.0,
                                      horizontal: 10.0,
                                    ),
                                    border: OutlineInputBorder(
                                      borderRadius: BorderRadius.all(
                                        Radius.circular(20.0),
                                      ), // 32
                                    ),
                                    enabledBorder: OutlineInputBorder(
                                      borderSide: BorderSide(
                                        color: borderColour,
                                        width: 1.0,
                                      ),
                                      borderRadius: BorderRadius.all(
                                        Radius.circular(20.0),
                                      ), // 32
                                    ),
                                    focusedBorder: OutlineInputBorder(
                                      borderSide: BorderSide(
                                        color: borderColour,
                                        width: 2.0,
                                      ),
                                      borderRadius: BorderRadius.all(
                                        Radius.circular(20.0),
                                      ), // 32
                                    ),
                                  ),
                                ),
                              ),

Answer 1

您需要删除提示文本值前面的\n\n 表达式，因为\n 为我们提供了换行的功能。在您的情况下，您分两次切换线路。这就是提示文本未出现在您键入的位置的原因。

decoration: InputDecoration(
              hintText: 'Type  away !   :', <--- here
              hintStyle: TextStyle(
                             color: fontColour,
                             fontFamily: 'Michroma',
                             fontWeight: FontWeight.bold,
                                      fontSize: 12),

当您删除该表达式时，它可能不会位于中心。因此您可以通过执行以下操作将其居中；

child: TextField(
            controller: postTextController,
            keyboardType: TextInputType.multiline,
            textAlign: TextAlign.center,
            maxLines: null,
            expands: true, 
            textAlignVertical: TextAlignVertical.center,
            style: TextStyle(
                      fontFamily: 'Michroma',
                      fontSize: 12),
                      decoration: InputDecoration(
                         hintText: 'Type  away !   :',
                         hintStyle: TextStyle(
                         fontFamily: 'Michroma',
                         fontWeight: FontWeight.bold,
                                      fontSize: 12),

Flutter：在更大的容器中对齐 TextField 文本

Flutter: Align TextField text in a larger container

textfield

dart

flutter