缠绕文字

Question

随着文本的增长，我想要包装文本。我搜索并尝试用几乎所有东西包裹，但仍然文本保持一行并从屏幕溢出。有谁知道如何实现这一目标？任何帮助都非常感谢！

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

Answer 1

在我的一个项目中，我在Texts周围包裹Container实例。此特定代码示例具有两个堆叠的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]为容器添加了宽度约束

Answer 2

使用扩展

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

Answer 3

这对我有用

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

没有Container的宽度，Flexible包装文本。

Answer 4

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

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

要么

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

对于多个小部件，您可以选择Wrap小部件。有关详细信息，请查看this

Answer 5

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

Answer 6

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

Answer 7

尝试使用Wrap-widget在文本增长时包装文本：

例：

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

Answer 8

您可以使用Container并设置宽度，Text将自动换行

Container(
  width: 230.0,
  child: Text(
    "long text"
  ),
);