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(