颤音:较大容器中的文本文本对齐

发布于 2025-01-22 01:55:28 字数 3580 浏览 1 评论 0原文

我可以没有任何问题将提示文本与中心对齐,但是当用户开始输入文本框时,我似乎无法使其与中心保持一致。

当将最大值设置为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
                                    ),
                                  ),
                                ),
                              ),

I can align the hint text to the center with no issues, but when the user starts typing into the textbox, I can't seem to get it to align to the center.

When maxLines are set to 1, there isn't an issue, but when it is set to more than 1 (or to null in my case), then it seems to align to the top by default.

Screenshot1

Screenshot2

Is there any way to correct this?

                             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
                                    ),
                                  ),
                                ),
                              ),

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

甜嗑 2025-01-29 01:55:28

您需要在提示文本值前面删除\ 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),

You need to delete \n\n expression in front of the hint text value because \n provides us to switch to a new line.
In your case, you switch the line you in two times. That is why the hint text is not appearing where you type.

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

When you remove that expression, probably it will not be in the center. so you can center it by doing following;

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),
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文