颤振文本小部件溢出和多行

Question

有时当我用 flutter 编码时，当我使用长文本时在文本小部件中，有时我收到溢出消息，有时消息正常工作并且在很多行中，为什么我会发生这种情况？请向我解释如何避免这个问题。

Answer 1

Text Widgt 中有一些键属性:

  softWrap // if overflow then can wrap new line
  overflow // if overflow the overed text style
  maxLines // max lines

如果 Text Widgt 的父容器的宽度小于或等于设备宽度，则溢出的文本将换行到多行，或者如果文本太长，Text 将抛出溢出错误

给父容器一个宽度

例如：

 // overflow error
 Container(
 child: Column(
     children: <Widget>[
       Text("hellohellohellohellohellohellohellohellohe" +
          "llohellohellohellohellohellohellohellohellohe" +
         "llohellohellohellohellohellohello"),
       Text("dd")
     ],
   ),
)

给父容器固定宽度

// overflow will change to multiple lines, notice padding and margin's effect

 Container(
 width: 100,
 child: Column(
     children: <Widget>[
       Text("hellohellohellohellohellohellohellohellohe" +
          "llohellohellohellohellohellohellohellohellohe" +
         "llohellohellohellohellohellohello"),
       Text("dd")
     ],
   ),
)

或使用扩展或灵活让文本填充父容器

Expanded(
 child: Column(
     children: <Widget>[
       Text("hellohellohellohellohellohellohellohellohe" +
          "llohellohellohellohellohellohellohellohellohe" +
         "llohellohellohellohellohellohello"),
       Text("dd")
     ],
   ),
)



// or 

Flexible(
 child: Column(
     children: <Widget>[
       Text("hellohellohellohellohellohellohellohellohe" +
          "llohellohellohellohellohellohellohellohellohe" +
         "llohellohellohellohellohellohello"),
       Text("dd")
     ],
   ),
)

颤振文本小部件溢出和多行

flutter text widget overflow and multiline

flutter

text

overflow

multiline

longtext