Flutter Multiline 文本

Posted 2023-02-23

【中文标题】Flutter Multiline 文本

【英文标题】：Flutter Multiline for text

【发布时间】：2019-05-17 15:01:01

【问题描述】：

我只需要我的文本是多行的。我给出了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 子项进行修复

将您的文本小部件包装在灵活或扩展的小部件中。

【参考方案1】：

简答

多行文本所需要的只是您的Text() 小部件的宽度受父小部件的限制。例如：

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 官方频道上看到了this video，它很好地解释了这个问题。他们建议使用 LimitedBox 小部件。

【讨论】：

这个解释太好了：准确、简洁、正确。我希望我们有以这种风格编写的官方 Flutter 文档（指南/操作方法）。

如果我使用 TextOverFlow.ellipsis 并使用 SingleChildScrollView 包装 Text 小部件，则文本不会滚动。但是，如果我删除 TextOverFlow.ellipsis，则文本会按预期滚动。是否可以使用 TextOverFlow.ellipsis 和 SingleChildScrollView？

使用约束的更好方法***.com/a/55431670/7429464

【参考方案2】：

只需用 Expanded 包装您的文本小部件，如下所示

    Expanded(
      child: Text('data', maxLines: 4,
        overflow: TextOverflow.ellipsis,
        textDirection: TextDirection.rtl,
        textAlign: TextAlign.justify,),
    ),

【参考方案3】：

试试这个：

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

在我的实现中，我将它放在一行中，并在每一侧用大小框包围它，以便我的元素之间有一些空间，你可能会问为什么使用扩展，它习惯于占用尽可能多的空间，所以文字在纵向或横向模式下看起来不错。

这里有一个完整的例子，说明如何让它垂直而不是水平地反应：

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

【参考方案4】：

我想你忘了添加overflow 类型。

你可以这样使用：

Text(
     "TOP ADDED",
     textAlign: TextAlign.justify,
     overflow: TextOverflow.ellipsis,
     style: TextStyle(fontSize: 18.0),
     maxLines: 2,)

【参考方案5】：

使用带有列的扩展小部件来实现多行文本。

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

【参考方案6】：

处理此问题的最佳方法：

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

【参考方案7】：

或许可以试试TextField:

new TextField(
  keyboardType: TextInputType.multiline,
  maxLines: 2,
)

【参考方案8】：

只需将文本小部件包装在 Flexible 中即可。因为它只使用它需要的空间。 在 maxLines 之后，它只是切到省略号。

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

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

【参考方案9】：

你可以使用这个技巧。 Text( ''' This is very big text''' ), 只需将文本包裹在三个单引号中，flutter 就会根据其长度格式化文本。无需使用最大行数和文本字段。

【讨论】：

有效，只要您在字符串中添加\n 作为换行符。不过，使用三重引号或普通引号都没关系。无法理解所有的反对意见。