web-dev-qa-db-ja.com

オーバーフローの代わりにテキストをフラッターラップ

Flutterで長い文字列を使用してテキストウィジェットを作成する場合、列に直接配置するとテキストが折り返されます。ただし、列-行-列内にある場合、テキストは画面の端からはみ出します。

列-行-列内でテキストを折り返すにはどうすればよいですか？そして、この違いの理由は何ですか？上の列の子が同じ幅を持つことは私には論理的に思えますか？幅に制限がないのはなぜですか？

他の回答に基づいて、テキストをExpanded、Flexible、Container、FittedBoxに入れてみましたが、理解できない新しいエラーが発生します。

例：

MaterialApp(
  title: 'Text overflow',
  home: Scaffold(
    appBar: AppBar(title: Text("MyApp"),),
    body: Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            // The long text inside this column overflows. Remove the row and column above this comment and the text wraps.
            Column(
              children: <Widget>[
                Text("Short text"),
                Text("Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. ")
              ],
            ),
          ],
        ),
      ],
    ),
  ), 
)
flutterflutter-layout
20
Jesse de Wit

RowとColumnはFlexウィジェットであり、十分なスペースがないとスクロールしないため、フラッターによってオーバーフローエラーが発生します。

これが発生した場合、ExpandedまたはFlexibleウィジェットを使用して、長いテキストを折り返すことができます。

docs では明確に述べられていませんが、主軸の使用可能なスペースを埋めるために拡大することを超えて、ExpandedとFlexibleは交差軸方向に折り返します。

長い話

ステップバイステップのアプローチは、問題を理解するのに役立ちます。

まず、次のシナリオを検討してください。

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text overflow',
      home: Scaffold(
        appBar: AppBar(
          title: Text("MyApp"),
        ),
        body: Column(
          children: List.generate(100, (idx) => Text("Short text"))
        ),
      ),
    );
  }
}

これは、フラッターによって明確に報告されるように、垂直方向にオーバーフローする列ウィジェットです。

I/flutter ( 8390): The following message was thrown during layout:
I/flutter ( 8390): A RenderFlex overflowed by 997 pixels on the bottom.
I/flutter ( 8390): 
I/flutter ( 8390): The overflowing RenderFlex has an orientation of Axis.vertical.

次に、列内の行：

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text overflow',
      home: Scaffold(
        appBar: AppBar(title: Text("MyApp"),),
        body: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Text(String.fromCharCodes(List.generate(100, (i) => 65)))
              ],
            ),
          ],
        ),
      ),
    );
  }
}

これで、オーバーフローの問題が右側に表示されます。

私はあなたのケースに似せるために列に行を挿入しましたが、単純な行ウィジェットを使用する場合とまったく同じ問題が発生します：RowとColumnはどちらもFlexウィジェットです：

  • 彼らは子供たちを一方向に配置します。
  • スクロールしないため、子が使用可能なスペースよりも多くのスペースを占有すると、オーバーフローエラーが発生します。

拡張ウィジェット

このレイアウト、2つのアイテムを含む行を考え、

Column(
  children: <Widget>[
    Row(
      children: <Widget>[Text('AAAA'), Text('ZZZZ')],
    ),
  ],
),

利用可能なスペースをすべて埋めるための最初のアイテムExpanded：

Column(
  children: <Widget>[
    Row(
      children: <Widget>[
        Expanded(child: Text('AAAA')),
        Text('ZZZZ')],
    ),
  ],
),

最後に、非常に長い文字列を展開すると、テキストが交差軸方向に折り返されることがわかります。

Column(
  children: <Widget>[
    Row(
      children: <Widget>[
        Expanded(child: Text(String.fromCharCodes(List.generate(100, (i) => 65)))),
        Text('ZZZZ')],
    ),
  ],
),

38
attdona

最後のColumnを-ExpandedまたはFlexibleウィジェットでラップする必要があります。

その方法Columnは、テキストに必要な使用可能なスペースを占める可能性があります。

body: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              // The long text inside this column overflows. Remove the row and column above this comment and the text wraps.
              Expanded(
                child: Column(
                  children: <Widget>[
                    Text("Short text"),
                    Text(
                        "Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. ")
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
17
anmol.majhail

行または列のテキストのオーバーフローを回避するため。フレキシブルウィジェットまたはエキスパンドウィジェットの下でテキストを折り返すようにしてください。上記のウィジェットの1つでテキストを折り返した後、大きなテキストを複数行に折り返します。例を共有する：

拡張ウィジェットの前：

return  Center(child:
        Container(
        padding: EdgeInsets.only(left: 50, right: 50),
          child: Row(
           mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                height: 200,
                 child: Text('It is a multiline text It does not  auto warp the text.', textAlign: TextAlign.center,style: TextStyle(fontSize: 20.0, color: Colors.white)),

          )
          ],
        ))
      );

スクリーンショット：

enter image description here

Expanded内でワッピングした後：

  return  Center(
        child: Padding(padding:  EdgeInsets.only(left: 50, right: 50),
          child:  Row(
            mainAxisAlignment: MainAxisAlignment.center,

            children: <Widget>[
              Expanded(

                  child: Text('It is a multiline text It does not  auto warp the text.', textAlign: TextAlign.center,style: TextStyle(fontSize: 20.0, color: Colors.white))),
            ],
          ),
        )
      );

スクリーンショット： enter image description here

2
Aks

RichTextを使用できます

import 'package:flutter/gestures.Dart';

RichText(
  text: TextSpan(
    text: 'Hello ',
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: ' world!'),
    ],
  ),
)

RichText withGesture Detection

RichText
(
    text: TextSpan
    (
        style: TextStyle( color: Color(0xffaabbcc) ),
        text: 'By clicking SIGNUP button you acknowledge that you have read our',
        children: <TextSpan>
        [
            TextSpan
            (
                text: ' Privacy Policy', style: linkStyle(),
                recognizer: TapGestureRecognizer() ..onTap = showPrivacyPolicy
            ),

            TextSpan( text: ' and you agree to our' ),
            TextSpan
            (
                text: ' Terms', style: linkStyle(),
                recognizer: TapGestureRecognizer() ..onTap = showTerms
            ),
        ],
    ),
);

[〜＃〜]結果[〜＃〜]

enter image description here

0
Manish Dhruw