颤振-换行文本

我想包装文本作为文本增长。我搜索并尝试用几乎所有的东西来包装，但文本仍然保持一行，从屏幕溢出。 有人知道怎么做到吗? 任何帮助都非常感谢!< / p > 

Positioned(
left: position.dx,
top: position.dy,
child: new Draggable(
data: widget.index,
onDragStarted: widget.setDragging,
onDraggableCanceled: (velocity, offset) {
setState(() {
position = offset;
widget.secondCallback(offset, widget.index);
widget.endDragging();
});
},
child: new GestureDetector(
onTap: () {
widget.callback(widget.caption, widget.index);
},
child: new Text(
widget.caption.caption,
style: new TextStyle(
color: widget.caption.color,
fontSize: widget.caption.fontSize,
),
),
),
feedback: new Material(
type: MaterialType.transparency,
child: new Text(
widget.caption.caption,
style: new TextStyle(
color: widget.caption.color,
fontSize: widget.caption.fontSize),
softWrap: true,
),
),
));
395763 次浏览
小开
最佳答案

在我的一个项目中，我将Text实例包裹在__abc1周围。这个特定的代码示例具有两个堆叠的Text对象。

下面是一个代码示例。

    //80% of screen width
double c_width = MediaQuery.of(context).size.width*0.8;


return new Container (
padding: const EdgeInsets.all(16.0),
width: c_width,
child: new Column (
children: <Widget>[
new Text ("Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 ", textAlign: TextAlign.left),
new Text ("Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2", textAlign: TextAlign.left),
],
),
);

[edit]增加了容器的宽度限制

小开

使用扩展

 Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text(_name, style: Theme.of(context).textTheme.subhead),
new Container(
margin: const EdgeInsets.only(top: 5.0),
child: new Text(text),
),
],
),
小开 
Container(
color: Color.fromRGBO(224, 251, 253, 1.0),
child: ListTile(
dense: true,
title: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
RichText(
textAlign: TextAlign.left,
softWrap: true,
text: TextSpan(children: <TextSpan>
[
TextSpan(text: "hello: ",
style: TextStyle(
color: Colors.black, fontWeight: FontWeight.bold)),
TextSpan(text: "I hope this helps",
style: TextStyle(color: Colors.black)),
]
),
),
],
),
),
),
小开

你可以使用Flexible，在这种情况下person.name可以是一个很长的名称(Labels和BlankSpace是返回小部件的自定义类):

new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Flexible(
child: Labels.getTitle_2(person.name,
color: StyleColors.COLOR_BLACK)),
BlankSpace.column(3),
Labels.getTitle_1(person.likes())
]),
BlankSpace.row(3),
Labels.getTitle_2(person.shortDescription),
],
)
小开

Flexible可以做到这一点

new Container(
child: Row(
children: <Widget>[
Flexible(
child: new Text("A looooooooooooooooooong text"))
],
));

这是关于如何安排小部件的官方文档https://flutter.dev/docs/development/ui/layout#lay-out-multiple-widgets-vertically-and-horizontally。

记住，Flexible和Expanded只能在Column， Row或Flex中使用，因为Incorrect use of ParentDataWidget。

解决方案不仅仅是Flexible

小开

如果你想要包装的是单个文本小部件，你可以使用灵活的或扩大小部件。

Expanded(
child: Text('Some lengthy text for testing'),
)

或

Flexible(
child: Text('Some lengthy text for testing'),
)

对于多个小部件，你可以选择包装小部件。欲了解更多详细信息，请检查这

小开

尝试Wrap小部件在文本增长时对文本进行包装:

例子:

Wrap(
direction: Axis.vertical, //Vertical || Horizontal
children: <Widget>[
Text(
'Your Text',
style: TextStyle(fontSize: 30),
),
Text(
'Your Text',
style: TextStyle(fontSize: 30),
),
],
),
小开

你可以用灵活的小部件包装你的小部件，然后你可以用文本小部件的溢出属性设置文本属性。 你必须设置TextOverflow.剪辑 例如:- 

Flexible
(child: new Text("This is Dummy Long Text",
style: TextStyle(
fontFamily: "Roboto",
color: Colors.black,
fontSize: 10.0,
fontWeight: FontWeight.bold),
overflow: TextOverflow.clip,),)

希望这能帮助到一些人:)

小开

使用省略< em > < / em >

Text(
"This is a long text",
overflow: TextOverflow.ellipsis,
),

enter image description here

< em > < / em >使用消失

Text(
"This is a long text",
overflow: TextOverflow.fade,
maxLines: 1,
softWrap: false,
),

enter image description here

使用剪辑< em > < / em >

Text(
"This is a long text",
overflow: TextOverflow.clip,
maxLines: 1,
softWrap: false,
),

enter image description here

注意:

如果你在Row中使用Text，你可以像这样把Text放在Expanded中:

Expanded(
child: AboveText(),
)

提交答案