TextWidthBasis.longestLine 替代 AutoSizeText？

发布于 2025-01-11 15:33:08 字数 966 浏览 0 评论 0原文

对于单行文本，我有

Center(
            child: Container(
              decoration: BoxDecoration(
                border: Border(
                  bottom: BorderSide(
                      width: 1,
                  ),
                ),
              ),
              child: Text('Some text',
                style: TextStyle(
                  fontSize: 60),
                textAlign: TextAlign.center,
                textWidthBasis: TextWidthBasis.longestLine,
              ),
            ),
          ),

效果很好。但是，当我对多行文本使用 AutoSizeText 时，我无法使用 textWidthBasis: TextWidthBasis.longestLine 删除填充，因此下划线完全穿过屏幕。

还有其他方法可以去除填充吗？

原文

For a single line of text I have

Center(
            child: Container(
              decoration: BoxDecoration(
                border: Border(
                  bottom: BorderSide(
                      width: 1,
                  ),
                ),
              ),
              child: Text('Some text',
                style: TextStyle(
                  fontSize: 60),
                textAlign: TextAlign.center,
                textWidthBasis: TextWidthBasis.longestLine,
              ),
            ),
          ),

Which works great. But when I use AutoSizeText for multiple lines of text I can't remove the padding with textWidthBasis: TextWidthBasis.longestLine so the underline goes fully across the screen.

Is there another way to remove the padding?

分享到QQ

分享到微博

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

发布评论

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

吃素的狼 2025-01-18 15:33:08

我为您提供了两个选择，说实话，这两个选择都不是解决方案，而是变通办法，但有时在 Flutter 中，这是最好的选择

I've got two options for you, both of them are workarounds more than solutions to be honest, but sometimes in Flutter, that's the best you've got ????

(2 is a lot better than 1, good luck! happy coding!)

First is giving the original container a small padding as to not disrupt the text much:

 Padding(
                padding: const EdgeInsets.symmetric(horizontal: 8.0),
                child: Container(
                  decoration: BoxDecoration(
                    border: Border(
                      bottom: BorderSide(
                        width: 1,
                      ),
                    ),
                  ),
                  child: AutoSizeText('Some text\ndummy text\n some texttttttt',
                    style: TextStyle(
                        fontSize: 60),
                    textAlign: TextAlign.center,
                  ),
                ),
              ),

Which gives this output: https://gyazo.com/0c9d343ba6843d61327f2a33893fc81d

You can wrap the container with a Column and simply but a divider underneath it as so (keep in mind that "indent" and "endIndent" controlles the right/left "padding" of the divider!):

Column(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                child: AutoSizeText(
                  'Some text\ndummy text\n some texttttttt',
                  style: TextStyle(fontSize: 60),
                  textAlign: TextAlign.center,
                ),
              ),
              Divider(height: 1, thickness: 1, color: Colors.black, indent: 40, endIndent: 40,)
            ],
          ),

Which gives this output: https://gyazo.com/b7cefe2b36442939e13ecf344a858f31

回复收藏 0 原文

~没有更多了~