0

我是 Flutter 的新手，我正在尝试创建一个响应不同屏幕尺寸的布局。我花了很多时间阅读 Flutter 文档，但我无法弄清楚这一点。

以下代码适用于较大的手机屏幕尺寸，但卡片显示“引发了另一个异常：A RenderFlex 在底部溢出了 13 个像素。” 对于较小的屏幕尺寸。我正在调整高度。

如何修改高度以便在确定此值时考虑卡片大小？

 return InkWell(
  borderRadius: BorderRadius.circular(15),
  child: Card(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(15),
    ),
    child: Column(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.only(top: 10),
        ),
        Stack(
          children: <Widget>[
            ClipRRect(
              child: Image(
                image: myimage,
                height: 60,
                fit: BoxFit.fitHeight,
              ),
            ),
          ],
        ),
        Padding(
          padding: EdgeInsets.all(10),
          child: Row(
            children: <Widget>[
              Row(
                children: <Widget>[
                  SizedBox(
                    width: 5,
                  ),
                  Text(mytext),
                ],
              ),
            ],
          ),
        ),
      ],
    ),
  ),
);

}

4

1 回答 1

0

如果你在 Flutter 中创建响应式布局，那么你首先要了解如何在 Flutter 中进行用户媒体查询。

这是示例如何在颤动中使用媒体查询

例子：-

class _MyHomePageState extends State<MyHomePage> {


  @override
  Widget build(BuildContext context) {
    double h=MediaQuery.of(context).size.height;
    double w=MediaQuery.of(context).size.width;
    return Scaffold(
      body: Container(
        height:h*0.2,
        width: w*0.2,
        color:Colors.red,
      ),
    );
  }
}

如果您接下来使用媒体查询并避免小部件的异常高度宽度（而不是高度和宽度，您可以使用填充对称）现在我确定：RenderFlex 溢出已经消失。

有关更多信息，请查看：-

关于媒体查询类的 Flutter 文档

我认为这对你很有用。

于 2021-09-13T14:38:29.933 回答