Flutter 使容器高度 match_parent

Question

我必须构建以下小部件，它将作为父元素放置在 ListView 中。

我对左侧的绿色矩形有疑问。基本上我是这样构造我的小部件的：

-> Card
   -> Stack
      -> Container for the "right" side (Tire ID, icon, temperature, pressure info)           
      -> Container for green rectangle,
      -> Container with boxed decoration for green circle
      -> Text with "5LO"

但这是现在的样子：

基本上，左侧矩形的容器 不会将其高度拉伸到父堆栈的全高 。我该怎么做？

代码：

class TireListItem extends StatelessWidget {
  static const _circleSize = 36.0;

  const TireListItem({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
        margin: EdgeInsets.zero,
        key: Key('cardTire'),
        child: Stack(
          alignment: AlignmentDirectional.centerStart,
          children: [
            _TireContentInfoWidget(),
            _buildTireIndicationRectangle(), // This should build the rectangle on the left side.
            _buildTirePositionCircle(),
            _buildTirePositionTextView(context)
          ],
        ));
  }

  Widget _buildTireIndicationRectangle() {
    return Container(
      width: _marginLeft,
      decoration: BoxDecoration(
          color: AppColor.green,
          shape: BoxShape.rectangle,
          borderRadius: BorderRadiusDirectional.horizontal(
              start: Radius.circular(Dimens.cardCornerRadius))),
    );
  }

  Container _buildTirePositionCircle() {
    return Container(
      width: _circleSize,
      height: _circleSize,
      decoration: BoxDecoration(color: AppColor.green, shape: BoxShape.circle),
    );
  }

  Container _buildTirePositionTextView(BuildContext context) {
    return Container(
        margin: EdgeInsets.only(left: Dimens.spacingXs),
        child: Text(
          "2RO",
          style:
              Theme.of(context).textTheme.button.apply(color: AppColor.white),
        ));
  }
}

如果我给矩形容器设置一个固定的高度，基本上就可以了，但我希望文本信息区域定义小部件的完整高度：

 Widget _buildTireIndicationRectangle() {
    return Container(
      width: _marginLeft,
      height: 150,
      decoration: BoxDecoration(
          color: AppColor.green,
          shape: BoxShape.rectangle,
          borderRadius: BorderRadiusDirectional.horizontal(
              start: Radius.circular(Dimens.cardCornerRadius))),
    );
  }

Answer 1

您可以使用 IntrinsicHeight class 解决这个问题。如果用 InstrinctHeight 包装 Stack，则 Stack 的高度由父级的高度固定。请查看 IntrinsicHeight 文档。

https://api.flutter.dev/flutter/widgets/IntrinsicHeight-class.html

@override
  Widget build(BuildContext context) {
    return Card(
        margin: EdgeInsets.zero,
        key: Key('cardTire'),
        child: IntrinsicHeight(child: Stack(
          alignment: AlignmentDirectional.centerStart,
          children: [
            _TireContentInfoWidget(),
            _buildTireIndicationRectangle(), // This should build the rectangle on the left side.
            _buildTirePositionCircle(),
            _buildTirePositionTextView(context)
          ],
        ),
      ),
    );
  }

Flutter 使容器高度 match_parent

Flutter make container height match_parent

widget

flutter