子容器的高度取决于父容器的 Widget

Question

我创建了一个容器，响应地给它一个高度和宽度，但问题是在容器的孩子中，我使用 ListView 来显示一些基本上是容器的卡片，我给它们一个恒定的高度，但卡片的高度完全取决于容器的高度，即使我将卡片的高度设为 0，也不会发生任何事情，当我增加容器高度时，卡片高度会增加，减少时也会发生同样的情况。这在我之前从未发生过，可能这是一个新版本，我需要帮助，请给出解释并给出答案。您可以看到容器和卡片的代码。

容器代码

 Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 0),
          child: Container(
            child: ListView(
              scrollDirection: Axis.horizontal,
              children: sample
                  .map((obj) => card.PredictionCard(
                      temprature: obj.temprature, status: obj.status))
                  .toList(),
            ),
            height: _device.height * 0.22,
            decoration: cardDecoration,
          ),
        ),

卡码

class PredictionCard extends StatelessWidget {
  final temprature;
  final status;

  const PredictionCard({this.temprature, this.status});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      child: Container(
        margin: EdgeInsets.symmetric(
          vertical: 10,
        ),
        height: 120,
        decoration: predictionCardDecoration,
        width: 100,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '$temprature',
              style: TextStyle(
                color: Colors.white,
                fontSize: 40,
              ),
            ),
            Text(
              '$status',
              style: TextStyle(
                  color: Colors.white, fontSize: 15, letterSpacing: 1),
            ),
            SizedBox(height: 5),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                Column(
                  children: [
                    Image(
                      image: AssetImage('assets/rainIcon.png'),
                    ),
                    Text(
                      '23%',
                      style: TextStyle(
                          color: Colors.white, fontSize: 15, letterSpacing: 1),
                    ),
                  ],
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Image.asset('assets/rainDropIcon.png'),
                    Text(
                      '0%',
                      style: TextStyle(
                          color: Colors.white, fontSize: 15, letterSpacing: 1),
                    ),
                  ],
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

集成响应式高度的类代码

// widget binging method
class DeviceConfig {
  final height = WidgetsBinding.instance.window.physicalSize.height /
      WidgetsBinding.instance.window.devicePixelRatio;
  final width = WidgetsBinding.instance.window.physicalSize.width /
      WidgetsBinding.instance.window.devicePixelRatio;
}


// using media query {uses context to set value of device configuration}
class DeviceConfigQuery {
  var height;
  var width;
  DeviceConfigInit(BuildContext context) {
    height = MediaQuery.of(context).size.height;
    width = MediaQuery.of(context).size.width;
  }
}

Answer 1

好的，我将允许自己从另一个帖子中复制答案，以记住这一点，我不会说得更好。

Flutter 中的约束的工作方式与平时有所不同。小部件 自己没有约束。

当您在容器上指定宽度/高度时，您不是 约束容器。您正在约束 Container 的子级。

然后容器将根据其子项的大小调整自身大小。

因此，父小部件总是对它们的最终结果有最终决定权。 后代应该调整大小。

如果你想解决这个问题，你必须使用 Align 小部件：

 Container(   
     width: 200.0,
     height: 200.0, 
     child: Align(
       alignment: Alignment.topLeft,
       child: Container(
         width: 50.0,
         height: 50.0,
         decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.red),
       ),
     ),
 );

这可能看起来很奇怪和限制。但这个奇怪的地方是 为什么 Flutter 的布局如此强大和可组合。

回答者： Rémi Rousselet 在这篇文章中https://stackoverflow.com/a/54717843/2945977

在您的示例中，不要使用Padding，而是使用Align 和alignment: Alignment.center