logo标签列表

Flutter多行文本

androidflutterflutter-layout
89
我所需要的只是我的文本可以多行显示。我已经使用了maxLines属性，但仍然出现了RenderFlex溢出错误，因为下一个文本没有换到第二行。
      Align( alignment: Alignment.bottomCenter,
      child: new ButtonBar(
        alignment: MainAxisAlignment.center,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.all(20.0),
            child: new Text(
              "This is a very bigggggggg text !!!",textDirection: TextDirection.ltr,
              style: new TextStyle(fontSize: 20.0, color: Colors.white),
              maxLines: 2,
            ),
          )
        ],
      ),
    )
我已经通过移除ButtonBar子元素来修复了。 - Vivek C A
3
将文本小部件包装在一个Flexible或Expanded小部件中，以使其具有灵活的布局并能够自适应大小。 - Shakeeb Siddiqui
12个回答
130

简短回答

要实现多行文本，只需要限制父组件中小部件的宽度即可。例如：

SizedBox(
    width: 150,
    child: Text(
    "This text is very very very very very very very very very very very very very very very very very very very very very very very very very long",
    ),
),

长篇回答

最小工作示例+解释：

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold( //Text widgets, multi-line or not, need a Scaffold widget somewhere up the widget tree.
        body: Row( //Widgets which help to display a list of children widgets are the 'culprit', they make your text widget not know what the maximum width is. In OP's example it is the ButtonBar widget.
          children: [
            Container( 
              width: 100, //This helps the text widget know what the maximum width is again! You may also opt to use an Expanded widget instead of a Container widget, if you want to use all remaining space.
              child: Center( //I added this widget to show that the width limiting widget doesn't need to be a direct parent.
                child: Text(
                  "This text is very very very very very very very very very very very very very very very very very very very very very very very very very long",
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

额外信息

您还提到了maxlines。该属性限制了最大行数。如果这是您想要的，我建议您还要尝试使用overflow属性。

SizedBox(
  width: 100,
  child: Text(
    "This text is very very very very very very very very very very very very very very very very very very very very very very very very very long",
    maxLines: 2,
    overflow: TextOverflow.ellipsis,
  ),
),

更新

我在Flutter官方频道上看到了这个视频，它很好地解释了这个问题。他们建议使用LimitedBox小部件。

5
这个解释非常好：精确、简洁、正确。我希望我们有官方的 Flutter 文档（指南/如何做）以这种风格编写。 - Dvinubius
如果我使用TextOverFlow.ellipsis并将Text widget包装在SingleChildScrollView中，文本不会滚动。但是如果我删除TextOverFlow.ellipsis，则文本会按预期滚动。是否可能同时使用 TextOverFlow.ellipsis 和 SingleChildScrollView？ - Richardd
更好的使用约束条件的方法 https://dev59.com/rFMI5IYBdhLWcg3w1vSi#55431670 - FindOutIslamNow
当Text位于Wrap小部件中时该怎么办？在这种情况下似乎没有什么方法可行，文本会在单行中连续溢出。 - Muhammad Qasim
44

只需将文本小部件包装在以下的Expanded中即可

    Expanded(
      child: Text('data', maxLines: 4,
        overflow: TextOverflow.ellipsis,
        textDirection: TextDirection.rtl,
        textAlign: TextAlign.justify,),
    ),
1
我已经顶过它了，然后我忘记了如何操作，于是我又找到了这个答案。我无法再次顶起，所以我决定写一条评论（或许这样我会更好地记住）谢谢！ - Shalugin
24

试试这个：

Expanded(            
    child: Text(
      'a long text',
      overflow: TextOverflow.clip,
    ),
),

在我的实现中，我将这个放在一行内，并在两侧加上了尺寸框，以便在元素之间有一些空间。你可能会问为什么要使用"expanded"，嗯，它被用来尽可能地占用空间，这样文本在纵向或横向模式下都会看起来很好。

下面是一个完整的示例，展示如何使其在垂直方向上也能反应出来，而不仅仅是水平方向：

Card(
  child: InkWell(
    onTap: (){},
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: Row(
        children: <Widget>[
          SizedBox(
            height: 70, // default\minimum height
          ),
          Container(
            height: 44,
            width: 44,
            decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.all(Radius.circular(22))),
          ),
          SizedBox(
            width: 15,
          ),
          Expanded(
            child: Text(
              'the very long title',
              overflow: TextOverflow.clip,
            ),
          ),
          SizedBox(
            width: 10,
          ),
          Text(
            'value', //some other text in the end of the card or maybe an icon instead
          ),
          SizedBox(
            width: 30,
          ),
        ],
      ),
    ),
  ),
)
16

我认为您忘记添加overflow类型。

您可以使用类似以下的代码：

Text(
     "TOP ADDED",
     textAlign: TextAlign.justify,
     overflow: TextOverflow.ellipsis,
     style: TextStyle(fontSize: 18.0),
     maxLines: 2,)
textAlign设置确保了多行文本的居中对齐，使用“\n”字符进行分隔。例如：Text("line one\nlinetwo", textAlign: TextAlign.center) - Donna
11

使用Expanded widget与Column widget一起实现多行文本。

Expanded(child: 
 Column(crossAxisAlignment: CrossAxisAlignment.start ,
 children: [
            Text(food.title),
            Text(food.price)
           ]
))
9

将文本小部件包装在 Flexible 中。它仅使用所需的空间。在达到 maxLines 后，它会被切断为省略号。

如果您想要无限行，请删除 maxLines 属性。借助 Flexible 的帮助，它使用小部件所需的空间。

Flexible(
  child: Text('Long Text', maxLines: 3,
    overflow: TextOverflow.ellipsis,
    textAlign: TextAlign.justify,
  ),
),
4

处理此问题的最佳方式：

Expanded(
child: Text(document['content'],
textAlign: TextAlign.start,
overflow: TextOverflow.ellipsis,
maxLines: 20,
))
2

您可以使用这个技巧：Text(''' 这是非常长的文本 ''' )，只需用三个单引号包裹文本，Flutter 就会根据其长度格式化文本。无需使用最大行数和文本字段。

1
只要在字符串中添加\n作为换行符，它就可以工作。无论您使用三引号还是普通引号都没有关系。我不明白所有的踩票。 - Throvn
1

Maxline用于设置或查看想要设置的行数。

Text(
     "Name Safal Bhatia",
     style: TextStyle(fontSize: 16),
     maxLines: 3,)
1

将您的文本小部件与AutoSizeText小部件和Flexible小部件一起包装。

  • AutoSizeText会根据屏幕大小调整文本大小

  • Flexible控制您的小部件不要溢出

    要获取AutoSizeText，您需要添加依赖项。 auto_size_text: ^3.0.0 - 示例

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接