出现渲染流错误并强制采用 singlechildscrollview答案

【问题标题】：getting render flow error and forced take singlechildscrollview出现渲染流错误并强制采用 singlechildscrollview
【发布时间】：2022-08-17 20:58:54
【问题描述】：

我正在创建简单的产品详细信息屏幕，我在正文中使用了专栏，根据媒体查询设置高度

一个简单的 SizedBox 采用 mediaquiry 的高度大小

但我收到错误A RenderFlex overflowed by 80 pixels on the bottom

如果我采取 singlechildscrollview 它解决了....但是在这里我无法理解我的错误是什么....

是因为appbar的高度吗？如果是这样的话..如何计算出现的高度...这样我就可以从身体的大小中扣除

这是我的简单代码，我可以用 SingleChildScrollView 解决，但主要是我没有得到什么问题..

class DetailScreen extends StatelessWidget {
  final Product product;

  DetailScreen({required this.product});

  @override
  Widget build(BuildContext context) {
    Size size=MediaQuery.of(context).size;
    print(size.toString());
    return Scaffold(
      backgroundColor: product.color,
      appBar: buildAppbar(context),
      body: Column(children: [
        SizedBox(
          height: size.height,
          child: Stack(
          children: [
            Container(
              height: 10,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(24),
                  topRight: Radius.circular(24),

                ),
              ),

            )

          ],
        ),

        ),
      ],),
    );
  }

  AppBar buildAppbar(BuildContext context)
  {
    return AppBar(
      backgroundColor: product.color,
      elevation: 0,
      leading: IconButton(icon: SvgPicture.asset(\'assets/icons/back.svg\',color: Colors.white,),onPressed: (){
        Navigator.pop(context);
      },),
      actions: [
        IconButton(onPressed: (){}, icon: SvgPicture.asset(\'assets/icons/search.svg\',color: Colors.white,)),
        SizedBox(width: 5,),
        IconButton(onPressed: (){}, icon: SvgPicture.asset(\'assets/icons/cart.svg\',color: Colors.white,)),
        SizedBox(width: 20,),
      ],

    );
  }
}

你把 SingleChildScrollView 放在哪里了？
我没有放singlechildscrollview ...因为我不想放...如果我将列包装在Singlechildscrollview中...它可以工作，但我不想要singlechildscrollview

标签： flutter flutter-layout

【解决方案1】：

我怀疑额外的像素是因为 appBar 的高度。您可以从高度最小化该像素，或者更好地在主体上使用 LayoutBuilder。另外，我看不到 Column 小部件的任何用例，您可以将其删除

return Scaffold(
  appBar: buildAppbar(context),
  body: LayoutBuilder(
    builder: (context, constraints) => SizedBox(
      height: constraints.maxHeight,
      child: Stack(

【讨论】：

实际上，你可以在 body 上使用 Stack
注意MediaQuery.of(context).size; 返回屏幕大小而不是父视口

【解决方案2】：

尝试在您的 Column 中使用 Expanded 而不是 SizedBox

 return Scaffold(
      backgroundColor: product.color,
      appBar: buildAppbar(context),
      body: Column(children: [
        Expanded(
          height: size.height,
          child: Stack(
          children: [
            Container(
              height: 10,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(24),
                  topRight: Radius.circular(24),
                ),
              ),
            )
          ],
          ),
        ),
        ....

【讨论】：