web-dev-qa-db-ja.com

Flutter-子供がいるコンテナを画面全体に表示する方法

Flutterのドキュメントに従ってContainers with no children try to be as big as possible unless the incoming constraints are unbounded, in which case they try to be as small as possible. Containers with children size themselves to their children.機能させるために私が行った中で最も近いもの：

return Stack(
  children: <Widget>[
    Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      //width: Device.screenWidth,
      //height: Device.screenHeight,
      child: Column(
        children: <Widget>[(view[1])],
      ),
    ),
    Container(
      width: MediaQuery.of(context).size.width * .50,
      height: MediaQuery.of(context).size.width * .50,
      child: Column(
        children: <Widget>[(view[0])],
      ),
    ),
  ],
);


I/flutter (12292): The following message was thrown during layout:
I/flutter (12292): A RenderFlex overflowed by 81 pixels on the bottom.
I/flutter (12292): The overflowing RenderFlex has an orientation of Axis.vertical.
I/flutter (12292): The Edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter (12292): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

MediaQueryまたはDeviceがオーバーフローを防止していない理由を理解できませんか？最初のコンテナは常にAndroid=携帯電話またはタブレット;現在テストするiPhoneまたはiPadはありません。黄色と黒でオーバーフローする他の投稿から読んだ内容に基づいて修正されます。 SingleChildScrollViewでラップするだけですが、そうしようとすると、

child: SingleChildScrollView(
        child: Column(
          children: <Widget>[(view[1])],
        ),
      ),

I/flutter (12292): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (12292): The following assertion was thrown during performLayout():
I/flutter (12292): RenderFlex children have non-zero flex but incoming height constraints are unbounded.
I/flutter (12292): When a column is in a parent that does not provide a finite height constraint, for example if it is
I/flutter (12292): in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a
I/flutter (12292): flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining
I/flutter (12292): space in the vertical direction.
I/flutter (12292): These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child
.
.
.
I/flutter (12292):   crossAxisAlignment: center
I/flutter (12292):   verticalDirection: down
I/flutter (12292): This RenderObject had the following child:
I/flutter (12292):   RenderAndroidView#e356e NEEDS-LAYOUT NEEDS-Paint

私が見たエラーに基づいて、Expanded、ClipRect、および他のウィジェットを使用して他のいくつかの試みを行いましたが、画像がまったくない場所でさらに悪化しました。シンプルなものがないか、別の方法で修正する必要がありますか？

編集：Amsakannaによると、最新の試みは以下ですが、81ピクセルだけオーバーフローして、最初のコードブロックで上記と同じエラーメッセージが生成されます。

return Stack(
  children: <Widget>[
    SingleChildScrollView(
      child: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Column(
          children: <Widget>[view[1])],
        ),
      ),
    ),

I/flutter ( 1144): The following message was thrown during layout:
I/flutter ( 1144): A RenderFlex overflowed by 81 pixels on the bottom.
I/flutter ( 1144): The overflowing RenderFlex has an orientation of Axis.vertical.
I/flutter ( 1144): The Edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter ( 1144): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

ビューポートセクションに収まるようにコンテンツを拡張する here が見つかったため、SingleChildScrollView内でIntrinsicHeightを使用しようとしましたが、オーバーフローしました（81ピクセル）と同様のエラーメッセージが表示されます。

dartflutterflutter-layout
6
JC23

私のアプローチ...

return Scaffold(
      appBar: AppBar(
        title: Text('Title'),
      ),
      body: Container(
        color: Colors.Indigo[200],
        alignment: Alignment.center,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              child: Image.file(_image),
            ),
          ],
        ),
      ),
    );
0
Nikhil Chigali

わたしにはできる..

return Scaffold(
              appBar: AppBar(
                title: Text("chatEasy"),
                backgroundColor: Color.fromRGBO(102, 108, 218, 1),
              ),
              body: Container(
                child: Column(
                  children: <Widget>[
                    Expanded(
                      child: Container(
                        child: Image(
                          image: AssetImage("images/baseScreen.png"),
                          fit: BoxFit.fitHeight,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            );
          }
        }
0
Raghib Arshi

あなたはそれをSingleChildScrollViewの中にラップすることで正しく行いました。

2番目のエラーは、「Expanded」のようなフレックスウィジェットが列内に配置されている場合に発生します。最初の列内に拡張ウィジェットを配置しなかった場合は、おそらくそれを行うカメラウィジェットです。

コンテナまたはSizedBox内にラップして、カメラウィジェットに一定のサイズを指定してみてください。

0
Amsakanna