Flutter-环绕文本[重复]

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

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

Answer 2

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 3

尝试Wrap 小部件在文本增长时换行：

示例：

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

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

---

注意：

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

Expanded(
  child: AboveText(),
)

Answer 5

您可以使用灵活的小部件包裹小部件，而不是使用文本小部件的溢出属性设置文本的属性。 你必须设置 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 6

如果您要包装单个文本小部件，您可以使用 灵活 或 扩展 小部件。

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

或

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

对于多个小部件，您可以选择Wrap小部件。更多详情请查看this

Answer 7

您可以使用灵活，在这种情况下 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 8

使用扩展

 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 9

在我的一个项目中，我将Text 实例包裹在Containers 周围。此特定代码示例具有两个堆叠的 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),
        ],
      ),
    );

[编辑] 为容器添加了宽度约束