android - Flutter Multiline 文本

我只需要我的文本是多行的。我给出了 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,
            ),
          )
        ],
      ),
    )

最佳答案

简答

多行文本所需要的只是您的 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,
  ),
),

更新

我遇到了this video在 Flutter 官方 channel 上很好地解释了这个问题。他们建议使用 LimitedBox 小部件。

https://stackoverflow.com/questions/53811932/

相关文章:

dart - 底部带有滚动页脚的 ListView

android - 如何使用 Flutter 将图像上传到 Firebase

android - 在 flutter 中从 initState 调用 scopedModel

flutter - 在 Flutter 中选择下拉项时出错

dart - 如何使用 flutter 在移动应用程序中禁用多点触控

dart - Flutter Http错误SocketException : OS Error: C

dart - Flutter:将盒子阴影添加到透明容器

dart - flutter 中的下拉按钮不会将值切换到所选值

firebase - 无法为 flutter 构建发布 APK

dart - 将类转换为 JSON 或 List