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

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

当前回答

在我的一个项目中,我在容器周围包装文本实例。这个特定的代码示例具有两个堆叠的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]增加了容器的宽度限制

其他回答

你可以使用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),
  ],
)

在我的一个项目中,我在容器周围包装文本实例。这个特定的代码示例具有两个堆叠的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]增加了容器的宽度限制

灵活的就能做到这一点

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只能在列、行或Flex中使用,因为使用了错误的ParentDataWidget。

解决办法不仅仅是灵活

使用扩展

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

如果您想要包装的是单个文本小部件,则可以使用Flexible或Expanded小部件。

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

or

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

对于多个小部件,您可以选择Wrap小部件。欲了解更多细节,请查看此