web-dev-qa-db-ja.com

フラッターラッピングテキスト

テキストが大きくなるにつれてテキストを折り返したい。私は検索し、ほとんどすべてでラップを試みましたが、テキストはまだ1行のままで、画面からはみ出します。誰もこれを達成する方法を知っていますか？どんな助けも大歓迎です！

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,
        ),
      ),
    ));
dartflutter
21
TwoSan

私のプロジェクトでは、TextインスタンスをContainersで囲みます。この特定のコードサンプルは、2つの積み重ねられた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),
        ],
      ),
    );

[編集]コンテナに幅の制約を追加しました

24
Max Lambertini

拡張を使用

 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),
                ),
              ],
            ),
30
Piotr Badura

これは私のために働いた

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

コンテナの幅がないと、Flexibleはテキストを折り返します。

28
Fiury

単一のテキストウィジェットでラップする場合は、FlexibleまたはExpandedウィジェット。

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

または

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

複数のウィジェットの場合、Wrapウィジェットを選択できます。詳細については、チェックアウト this

13
AK.Pandian
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)),
                                  ]
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
1
Dipu S. James

ウィジェットをフレキシブルウィジェットでラップすることができ、テキストウィジェットのオーバーフロープロパティを使用してテキストのプロパティを設定できます。 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,),)

これが誰かを助けることを願っています:)

0
Vaidehee

コンテナを使用して幅を設定できます。子としてのテキストは自動的にラップされます

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

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),
  ],
)
0
Alexis Gamarra