flutter 底部溢出 227 像素的 RenderFlex

Question

我正在嘗試使用 flutter 創建一個歡迎屏幕，但是當我將設備方向更改為橫向時，它給我一個錯誤。 我想做的是，當用戶將設備方向更改為橫向時，內容應將其大小減小到可用大小，我不想將其包裝在 SingleChildScrollView 中。

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════

The following assertion was thrown during layout:

A RenderFlex overflowed by 227 pixels on the bottom.


The relevant error-causing widget was:

  Column Column:/lib/welcome.dart:18:15


The overflowing RenderFlex has an orientation of Axis.vertical.

The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and

black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the

RenderFlex to fit within the available space instead of being sized to their natural size.

This is considered an error condition because it indicates that there is content that cannot be

seen. If the content is legitimately bigger than the available space, consider clipping it with a

ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,

like a ListView.

The specific RenderFlex in question is: RenderFlex#44483 relayoutBoundary=up1 OVERFLOWING:

  needs compositing

  creator: Column ← _BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ←

    CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ←

    _InkFeatures-[GlobalKey#1ab81 ink renderer] ← NotificationListener ←

    PhysicalModel ← AnimatedPhysicalModel ← ⋯

  parentData: offset=Offset(0.0, 0.0); id=_ScaffoldSlot.body (can use size)

  constraints: BoxConstraints(0.0<=w<=638.0, 0.0<=h<=360.0)

  size: Size(638.0, 360.0)

  direction: vertical

  mainAxisAlignment: start

  mainAxisSize: max

  crossAxisAlignment: center

  verticalDirection: down

我試圖將整個身體包裹在一個擴展和靈活的小部件中，但它顯示

Another exception was thrown: Incorrect use of ParentDataWidget.

Another exception was thrown: Every child of a RenderCustomMultiChildLayoutBox must have an ID in its parent data.

當方向變為橫向時如何減小內容大小？

這是我的代碼：

      home: Scaffold(
          resizeToAvoidBottomInset: false,
          backgroundColor: Color(0xffFEF3F0),
          body: Column(
            children: [
              Padding(
                padding: const EdgeInsets.only(top: 10.0),
                child: Center(
                  child: Container(
                    child: Image.asset(
                      'images/blogg.png',
                      width: 201.6,
                      height: 100,
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
              ),
              Text(
                'Express more than writings',
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0),
              ),
              SizedBox(height: 20),
              Container(
                child: Image.asset(
                  'images/drib1.PNG',
                  height: 300,
                  fit: BoxFit.cover,
                ),
              ),
              SizedBox(height: 50),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  primary: Colors.black,
                  onPrimary: Colors.white,
                  shadowColor: Color(0xff7d817e),
                  elevation: 3,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(32.0)),
                  minimumSize: Size(330, 45),
                ),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => Register()),
                  );
                },
                child: Text('Join for free'),
              ),
              SizedBox(height: 20),
              TextButton(
                style: ButtonStyle(
                  overlayColor: MaterialStateProperty.resolveWith<Color>(
                    (Set<MaterialState> states) {
                      return Colors.transparent;
                    },
                  ),
                  splashFactory: NoSplash.splashFactory,
                ),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => login()),
                  );
                },
                child: Text(
                  "if you have an account,Sign in",
                  style: TextStyle(color: Colors.black, fontSize: 16.0),
                ),
              )
            ],
          )),
    

Answer 1

如評論中所述，您可以使用LayoutBuilder ：

您可以只用它影響小部件的高度（如果您不想更改布局）：

LayoutBuilder(
            builder: (context,constraints) {
              return Column(
                children: [
                  Padding(
                    padding: const EdgeInsets.only(top: 10.0),
                    child: Center(
                      child: Image.network(
                        'https://pbs.twimg.com/media/FKNlhKZUcAEd7FY?format=jpg&name=small',
                        // width: 201.6,
                        height: constraints.maxHeight*0.2,
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                  const Text(
                    'Express more than writings',
                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0),
                  ),
                  const SizedBox(height: 20),
                  Image.network(
                    'https://pbs.twimg.com/media/FKNlhKZUcAEd7FY?format=jpg&name=small',
                    height: constraints.maxHeight*0.35,
                    fit: BoxFit.cover,
                  ),
                  SizedBox(height: constraints.maxHeight*0.04),
                  ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      primary: Colors.black,
                      onPrimary: Colors.white,
                      shadowColor: Color(0xff7d817e),
                      elevation: 3,
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(32.0)),
                      minimumSize: Size(330, 45),
                    ),
                    onPressed: () {},
                    child: const Text('Join for free'),
                  ),
                  SizedBox(height: constraints.maxHeight*0.01),
                  TextButton(
                    style: ButtonStyle(
                      overlayColor: MaterialStateProperty.resolveWith<Color>(
                        (Set<MaterialState> states) {
                          return Colors.transparent;
                        },
                      ),
                      splashFactory: NoSplash.splashFactory,
                    ),
                    onPressed: () {},
                    child: const Text(
                      'if you have an account,Sign in',
                      style: TextStyle(color: Colors.black, fontSize: 16.0),
                    ),
                  )
                ],
              );
            }
          ),
      ),

或者您設置一個斷點，您的布局應該從該斷點更改：

LayoutBuilder(
          builder: (context, constraints) {
            final maxHeight = constraints.maxHeight;
            if (maxHeight > 500) {
              return Column(
                children: [
                  Padding(
                    padding: const EdgeInsets.only(top: 10.0),
                    child: Center(
                      child: Image.network(
                        'https://pbs.twimg.com/media/FKNlhKZUcAEd7FY?format=jpg&name=small',
                        // width: 201.6,
                        height: maxHeight * 0.2,
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                  const Text(
                    'Express more than writings',
                    style:
                        TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0),
                  ),
                  const SizedBox(height: 20),
                  Image.network(
                    'https://pbs.twimg.com/media/FKNlhKZUcAEd7FY?format=jpg&name=small',
                    height: maxHeight * 0.35,
                    fit: BoxFit.cover,
                  ),
                  SizedBox(height: maxHeight * 0.04),
                  ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      primary: Colors.black,
                      onPrimary: Colors.white,
                      shadowColor: Color(0xff7d817e),
                      elevation: 3,
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(32.0)),
                      minimumSize: Size(330, 45),
                    ),
                    onPressed: () {},
                    child: const Text('Join for free'),
                  ),
                  SizedBox(height: maxHeight * 0.01),
                  TextButton(
                    style: ButtonStyle(
                      overlayColor: MaterialStateProperty.resolveWith<Color>(
                        (Set<MaterialState> states) {
                          return Colors.transparent;
                        },
                      ),
                      splashFactory: NoSplash.splashFactory,
                    ),
                    onPressed: () {},
                    child: const Text(
                      'if you have an account,Sign in',
                      style: TextStyle(color: Colors.black, fontSize: 16.0),
                    ),
                  )
                ],
              );
            }
            return Center(
              child: Column(
                children: [
                  const SizedBox(height: 20),
                  Image.network(
                    'https://pbs.twimg.com/media/FKNlhKZUcAEd7FY?format=jpg&name=small',
                    height: maxHeight * 0.5,
                    fit: BoxFit.cover,
                  ),
                  const Text(
                    'Express more than writings',
                    style:
                        TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0),
                  ),
                  SizedBox(height: maxHeight * 0.04),
                  ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      primary: Colors.black,
                      onPrimary: Colors.white,
                      shadowColor: Color(0xff7d817e),
                      elevation: 3,
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(32.0)),
                      minimumSize: Size(330, 45),
                    ),
                    onPressed: () {},
                    child: const Text('Join for free'),
                  ),
                  SizedBox(height: maxHeight * 0.01),
                  TextButton(
                    style: ButtonStyle(
                      overlayColor: MaterialStateProperty.resolveWith<Color>(
                        (Set<MaterialState> states) {
                          return Colors.transparent;
                        },
                      ),
                      splashFactory: NoSplash.splashFactory,
                    ),
                    onPressed: () {},
                    child: const Text(
                      'if you have an account,Sign in',
                      style: TextStyle(color: Colors.black, fontSize: 16.0),
                    ),
                  )
                ],
              ),
            );
          },
        ),

如果您使用第二種方式，最好為布局制作一個自己的小部件，否則您的代碼會變得不清楚。

Answer 2

您必須在Column小部件的父級設置一個具有屏幕高度的SizedBox ：

  Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: Color(0xffFEF3F0),
      body: SizedBox(
             height: double.infinity,
             child: Column(
                 children: [
                    Padding(
                      padding: const EdgeInsets.only(top: 10.0),
                      child: Center(