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

使用扩展

 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 2

在我的一个项目中，我将Text个实例包裹在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 3

这对我有用

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

Flexible不包裹容器的宽度。

Answer 4

使用省略号

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

使用淡入淡出

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

使用剪辑

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

注意：

如果您在Text中使用Row，则可以将Text放在Expanded上方，例如：

Expanded(
  child: AboveText(),
)

Answer 5

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

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

或

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

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

Answer 6

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 7

您可以使用“灵活小部件”包装小部件，然后使用“文本小部件”的溢出属性设置“文本”属性。您必须设置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,),)

希望这对某人有所帮助：）

Answer 8

您可以使用Flexible，在这种情况下， person.name 可以是长名称（Label和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 9

尝试使用环绕式小工具随文本增长来环绕文本：

示例：

Answer 10

您可以使用容器并设置宽度，文本作为子元素会自动换行

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

扑动包装文字

10 个答案: