当文本换行为多行时，使文本小部件缩小到最长的行

发布于 2025-01-16 19:31:00 字数 1226 浏览 0 评论 0原文

当文本换行时，是否可以将 Text 小部件缩小到最长行的宽度，因为它变得太长而无法放在单行中？

基本上我有这个自定义小部件：

class MyWidget extends StatelessWidget {
  final String text1;
  final String text2;

  const MyWidget({Key? key, this.text1='', this.text2=''}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,              
      children: [
        Expanded(
          child: Container(
            color: Colors.lightBlue,
            child: Center(child: Text(text1))
          )
        ),
        Expanded(
          child: Container(
            color: Colors.lightGreen,
            alignment: Alignment.centerRight,
            child: Text(text2, textAlign: TextAlign.start)
          )
        )
      ]
    );
  }
}

这是一个短文本和一个长文本的样子：

但我想要的是这样的：

请注意，我不希望文本右对齐 - 换行应向左对齐，但整个 Text 小部件应收缩到最长的行。

原文

Is it possible to shrink a Text widget to the width of the longest line when the text is wrapped because it becomes too long to fit on a single line?

Basically I have this custom widget:

class MyWidget extends StatelessWidget {
  final String text1;
  final String text2;

  const MyWidget({Key? key, this.text1='', this.text2=''}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,              
      children: [
        Expanded(
          child: Container(
            color: Colors.lightBlue,
            child: Center(child: Text(text1))
          )
        ),
        Expanded(
          child: Container(
            color: Colors.lightGreen,
            alignment: Alignment.centerRight,
            child: Text(text2, textAlign: TextAlign.start)
          )
        )
      ]
    );
  }
}

Here's what it looks like with one short and one long text:

But what I want is this:

Note that I do not want the text to be right-aligned - the wrapped lines should be aligned to the left, but the entire Text widget should shrink to the longest line.

分享到QQ

分享到微博

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

发布评论

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

忘东忘西忘不掉你 2025-01-23 19:31:00

在研究 Text 小部件的更奇特的属性时，我自己找到了答案。显然， textWidthBasis: TextWidthBasis.longestLine 正是我想要的。

class MyWidget extends StatelessWidget {
  final String text1;
  final String text2;

  const MyWidget({Key? key, this.text1='', this.text2=''}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,              
      children: [
        Expanded(
          child: Container(
            color: Colors.lightBlue,
            child: Center(child: Text(text1))
          )
        ),
        Expanded(
          child: Container(
            color: Colors.lightGreen,
            alignment: Alignment.centerRight,
            child: Text(text2, textWidthBasis: TextWidthBasis.longestLine)
          )
        )
      ]
    );
  }
}

Just found the answer myself when investigating the more exotic properties of the Text widget. Apparently, textWidthBasis: TextWidthBasis.longestLine does exactly what I want.

class MyWidget extends StatelessWidget {
  final String text1;
  final String text2;

  const MyWidget({Key? key, this.text1='', this.text2=''}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,              
      children: [
        Expanded(
          child: Container(
            color: Colors.lightBlue,
            child: Center(child: Text(text1))
          )
        ),
        Expanded(
          child: Container(
            color: Colors.lightGreen,
            alignment: Alignment.centerRight,
            child: Text(text2, textWidthBasis: TextWidthBasis.longestLine)
          )
        )
      ]
    );
  }
}

回复收藏 0 原文

北城半夏 2025-01-23 19:31:00

您可以使用 FittedBox 包裹文本

FittedBox(
           fit: BoxFit.fitWidth,
           child: Text(
           "some text"
            ),),

you can wrap Text with FittedBox

FittedBox(
           fit: BoxFit.fitWidth,
           child: Text(
           "some text"
            ),),

回复收藏 0 原文

心的憧憬 2025-01-23 19:31:00

这为我回答了。您可以替换代码中的以下部分：

     Expanded(
      child: Container(
          color: Colors.lightGreen,
          alignment: Alignment.centerRight,
          child: LayoutBuilder(builder: (context, size) {
            final span = TextSpan(text: text2);
            final tp = TextPainter(
                text: span,
                maxLines: 1,
                textDirection: Directionality.of(context));
            tp.layout(maxWidth: size.maxWidth);
            if (tp.didExceedMaxLines) {
              return Padding(
                padding: const EdgeInsetsDirectional.only(start: 16.0),
                child: Text(text2),
              );
            } else {
              return Text(text2);
            }
          })))

This answered for me. You can replace the following part in your code:

     Expanded(
      child: Container(
          color: Colors.lightGreen,
          alignment: Alignment.centerRight,
          child: LayoutBuilder(builder: (context, size) {
            final span = TextSpan(text: text2);
            final tp = TextPainter(
                text: span,
                maxLines: 1,
                textDirection: Directionality.of(context));
            tp.layout(maxWidth: size.maxWidth);
            if (tp.didExceedMaxLines) {
              return Padding(
                padding: const EdgeInsetsDirectional.only(start: 16.0),
                child: Text(text2),
              );
            } else {
              return Text(text2);
            }
          })))

回复收藏 0 原文

~没有更多了~