web-dev-qa-db-ja.com

テキストのフラッターマルチライン

必要なのは、テキストを複数行にすることだけです。 maxLinesのプロパティを提供していますが、次は2行目に行かないので、RenderFlexのオーバーフローエラーが右側にまだあります。

      Align( alignment: Alignment.bottomCenter,
      child: new ButtonBar(
        alignment: MainAxisAlignment.center,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.all(20.0),
            child: new Text(
              "This is a very bigggggggg text !!!",textDirection: TextDirection.ltr,
              style: new TextStyle(fontSize: 20.0, color: Colors.white),
              maxLines: 2,
            ),
          )
        ],
      ),
    )
androidflutterflutter-layout
9
Vivek C A

親ウィジェットがテキストの幅を制限していることを確認してから、オーバーフローとmaxlinesを使用します。例：

Container(
  width: 150,
  child: Text(
    "This text is very very very very very very very very very very very very very very very very very very very very very very very very very long",
    overflow: TextOverflow.Ellipsis,
    maxLines: 5,
  ),
),
12
Tom O

overflowタイプを追加するのを忘れたと思います。

次のようなものを使用できます。

Text(
     "TOP ADDED",
     textAlign: TextAlign.justify,
     overflow: TextOverflow.Ellipsis,
     style: TextStyle(fontSize: 18.0),
     maxLines: 2,)
4
Mohammed Mahmoud

これを試して：

Expanded(            
    child: Text(
      'a long text,
      overflow: TextOverflow.clip,
    ),
),

私の実装では、これを行内に入れ、各サイドにサイズのボックスで囲み、要素間にスペースを確保し、拡張を使用する理由を尋ねます。ポートレートモードまたはランドスケープモードに適しています。

そして、これは水平方向だけでなく垂直方向にも反応させる方法の完全な例です：

Card(
  child: InkWell(
    onTap: (){},
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: Row(
        children: <Widget>[
          SizedBox(
            height: 70, // default\minimum height
          ),
          Container(
            height: 44,
            width: 44,
            decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.all(Radius.circular(22))),
          ),
          SizedBox(
            width: 15,
          ),
          Expanded(
            child: Text(
              'the very long title',
              overflow: TextOverflow.clip,
            ),
          ),
          SizedBox(
            width: 10,
          ),
          Text(
            'value', //some other text in the end of the card or maybe an icon instead
          ),
          SizedBox(
            width: 30,
          ),
        ],
      ),
    ),
  ),
)
3
Basel Abuhadrous

TextFieldを使用してみてください。

new TextField(
  keyboardType: TextInputType.multiline,
  maxLines: 2,
)
1
stt106

テキストウィジェットを次のようにExpendedでラップするだけで、

 Expanded(
       child:  Text("data",maxLines:4,overflow:TextOverflow.Ellipsis,textDirection: TextDirection.rtl,textAlign: TextAlign.justify,),
     )
0
Kijacode