dart 抖动-换行文本

csga3l58  于 2023-05-26  发布在  其他
关注(0)|答案(9)|浏览(170)

我希望随着文本的增长自动换行。我搜索了一下,几乎所有的东西都尝试了 Package ,但文本仍然停留在一行,从屏幕上溢出。有人知道如何实现这一点吗?任何帮助是高度赞赏!

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

6psbrbz91#

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关于如何安排小部件的官方文档www.example.com。
请记住,FlexibleExpanded应该只在ColumnRowFlex中使用,因为Incorrect use of ParentDataWidget
解决方案不仅仅是Flexible

vddsk6oq

vddsk6oq2#

在我的一个项目中,我将Text示例 Package 在Container s周围。这个特殊的代码示例提供了两个堆叠的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),
        ],
      ),
    );

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

xggvc2p6

xggvc2p63#

使用省略号

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

nfeuvbwi4#

使用扩展

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

1l5u6lss5#

如果是要 Package 的单个文本widget,可以使用FlexibleExpandedwidget。

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

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

对于多个widget,您可以选择Wrapwidget。更多详情请查看this

inn6fuwd

inn6fuwd6#

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

示例:

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

xqk2d5yq7#

你可以用Flexible Widget Package 你的小部件,然后你可以使用Text Widget的溢出属性设置Text的属性。你必须设置TextOverflow.clip,例如:-

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

希望这对某人有帮助:)

9wbgstp7

9wbgstp78#

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

fjaof16o9#

您可以使用Flexible,在这种情况下,person.name可以是一个长名称(Labels和BlankSpace是返回widget的自定义类):

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

相关问题