Flutter Multiline 文本 [英] Flutter Multiline for text

问题描述

我只需要我的文本是多行的.我给出了 maxLines 的属性，但它仍然在右侧出现 RenderFlex 溢出错误，因为下一个不会进入第二行，

All I need is my text to be multi-line. Am giving the property of maxLines but its still getting RenderFlex overflowed error to the right as the next is not going to 2nd line,

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

推荐答案

简答

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

All that is required for multi-line text, is that your Text() widgets' width is limited by a parent widget. For example:

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

长答案

最小的工作示例+解释:

Minimal working example + explanation:

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 属性.

You also mentioned maxlines. This property limits the maximum amount of lines. If this is what you want, I recommend you also play with the overflow property.

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 小部件.

I came across this video on the official Flutter channel which explains this issue quite well. They recommend using a LimitedBox widget.

这篇关于Flutter Multiline 文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！