扑动包装文字 [英] Flutter- wrapping text

问题描述

我想随着文本的增长而换行。我进行搜索并尝试使用几乎所有内容进行换行，但文本仍然停留在一行并从屏幕溢出。
有人知道如何实现吗？
非常感谢您的帮助！

I want wrap text as text grows. I searched through and tried wrap with almost everything but still text stays one line and overflows from the screen. Does anyone know how to achieve this? Any help is highly appreciated!

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

推荐答案

在我的项目中，我包装了<$ c $围绕容器的c> Text 实例。此特定的代码示例具有两个堆叠的Text对象。

In a project of mine I wrap Text instances around Containers. This particular code sample features two stacked Text objects.

这是一个代码示例。

    //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]向容器添加宽度约束

[edit] Added a width constraint to the container

这篇关于扑动包装文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！