1. ホーム
  2. mobile

[解決済み] Flutter (Dart)です。レンダリングによる例外 / RenderFlexのオーバーフロー

2023-05-30 22:44:23

質問

Flutter(Dart)のRenderFlexでピクセルがオーバーフローしてしまう問題があります。レンダリングライブラリの例外です。

アプリのページビューにスクロール機能を管理または適用して、Flutterのレンダリング例外のようなメッセージを回避するにはどうしたらよいでしょうか。

RenderFlexが下に28ピクセルはみ出しました。

もし万が一、私を助けるために完全なログが必要なら、ここにあります。

をホットロードすると、メッセージにあるように、下に黄色と黒のストライプが表示されます。

これは、スクロール可能なウィジェットで管理できるものですか?または、それを制御するために、そうでなければ私のウィジェットを宣言することができますか?

必要であれば、完全なコード(私はテキストデータを変更しましたが、表示されるテキストは、画面サイズよりも長いと仮定し、したがって、エラーが表示されます)。

   @override
  Widget build(BuildContext context) {
    return new DefaultTabController(
        length: 3,
        child: new Scaffold(
          appBar: new AppBar(
            bottom: new TabBar(
              tabs: [
                new Tab(text: "xxx",),
                new Tab(text: "xxx",),
                new Tab(text: "xxx",),
              ],
            ),
            title: new Text(data["xxx"]),
          ),
          body: new TabBarView(
            children: [
              new Column(
                children: <Widget>[
                  new Text(data["xxx"],
                        style: new TextStyle(
                              fontStyle: FontStyle.italic,
                              color: Colors.blue,
                              fontSize: 16.0
                        ),),
                  new Text(data["xxx"],
                        style: new TextStyle(
                              fontStyle: FontStyle.italic,
                              color: Colors.blue,
                              fontSize: 10.0
                        ),),
                  new Text(data["xxx"],
                        style: new TextStyle(
                              fontStyle: FontStyle.italic,
                              color: Colors.blue,
                              fontSize: 16.0
                        ),),
                  new Text(data["xxx"],
                        style: new TextStyle(
                              fontStyle: FontStyle.italic,
                              color: Colors.blue,
                              fontSize: 8.0
                        ),
                      ),
                  new Text(data["xxx"],
                        style: new TextStyle(
                              fontStyle: FontStyle.italic,
                              color: Colors.blue,
                              fontSize: 8.0
                        ),),

                  new Row(
                    children: <Widget>[
                      new Expanded(
                        child: new Text("xxx"),
                      ),
                      new Expanded(
                        child: new Icon(Icons.file_download, color: Colors.green, size: 30.0,),
                      ),
                    ],
                  ),

                  new Divider(),
                  new Text("xxx", 
                            style: new TextStyle(
                              fontStyle: FontStyle.italic,
                              color: Colors.red,
                              fontSize: 16.0
                      ),
                  ),
                ],
              ),

              new ListView.builder(
                itemBuilder: (BuildContext context, int index) => new EntryItem(_lstTiles[index]),
                itemCount: _lstTiles.length,
              ),

              new Column(
                children: <Widget>[
                  new Text(data["xxx"], 
                            style: new TextStyle(
                              fontStyle: FontStyle.italic,
                              color: Colors.green[900],
                              fontSize: 16.0
                      ),
                  ),
                  new Text(data["xxx"], 
                            style: new TextStyle(
                              fontStyle: FontStyle.italic,
                              color: Colors.green[900],
                              fontSize: 16.0
                      ),),
                  new Text(data["xxx"]),
                  new ListTile(title: new Text("xxx")),
                  new Text(data["xxx"]),
                  new ListTile(title: new Text("xxx")),
                  new Divider(),
                  new Text("xxx", 
                            style: new TextStyle(
                              fontStyle: FontStyle.italic,
                              color: Colors.red,
                              fontSize: 16.0
                      ),
                  ),
                ],
              ),
            ],
          ),
        ),
      );
  }

どのように解決するのですか?

これは、特に複数のデバイスや方向でアプリのテストを開始したときに遭遇する、かなり一般的な問題です。Flutter の Widget gallery には、さまざまなスクロール ウィジェットをカバーするセクションがあります。

https://flutter.io/widgets/scrolling/

私は、コンテンツ全体を SingleChildScrollView で囲むか、スクロールする ListView .

EDITです。 この質問と回答が注目されたので、ここに着地する人のためにもう少し手助けをしてあげたいと思います。

Flutter SDKチームは、SDKのコード自体の中にある良いドキュメントに多くの努力を注いでいます。のアルゴリズムを理解するための最良のリソースの1つです。 Flex ウィジェット ( RowColumn はどちらも Flex のサブクラスです) は、クラス自体に付随する DartDoc を使って子クラスをレイアウトします。

https://github.com/flutter/flutter/blob/e3005e6962cfefbc12e7aac56576597177cc966f/packages/flutter/lib/src/widgets/basic.dart#L3724

Flutter のウェブサイトには チュートリアル があり、レイアウトを構築するための 対話型コードラボ の使用方法について RowColumn ウィジェットを使用します。