文本颤动多行

Question

我需要的是多行文本。我正在赋予的属性，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,
            ),
          )
        ],
      ),
    )

Answer 1

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

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

Answer 2

尝试这个：

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

Answer 3

确保父窗口小部件限制了文本的宽度，然后使用溢出和最大行，例如：

Container(
  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",
    overflow: TextOverflow.ellipsis,
    maxLines: 5,
  ),
),

Answer 4

我想你忘了添加overflow类型。

你可以使用这样的东西：

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

Answer 5

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

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

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

Answer 6

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

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