在 Flutter 中，如何为 Card 中的子元素动态分配高度？

Posted 2023-02-23

【中文标题】在 Flutter 中，如何为 Card 中的子元素动态分配高度？

【英文标题】：In Fluttter, how can you dynamically assign hight to child elements in Card?

【发布时间】：2021-10-17 21:54:12

【问题描述】：

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

以下代码适用于较大的手机屏幕尺寸，但卡片显示“引发了另一个异常：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),
                ],
              ),
            ],
          ),
        ),
      ],
    ),
  ),
);

【问题讨论】：

您可以使用LayoutBuilder 作为小部件树的父级，然后使用SizedBox，然后在Column 中使用Expanded

扩展当然是解决问题的方法。您可以在这里查看详细信息。 fluttercorner.com/…

【参考方案1】：

如果您是在 Flutter 中创建响应式布局，那么您首先要了解如何在 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 Documentation about Media Query Class

我认为这对你有用。