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的父容器的宽度小于或等于设备宽度，则溢出的文本将换成多行，或者如果文本太长，则文本将引发溢出错误

为父容器提供宽度

例如：

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

颤动的文本小部件溢出和多行

1 个答案: