Flutter 使容器高度 match_parent答案

【问题标题】：Flutter make container height match_parentFlutter 使容器高度 match_parent
【发布时间】：2021-02-08 07:33:03
【问题描述】：

我必须构建以下小部件，它将作为父元素放置在 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))),
    );
  }

【问题讨论】：

不幸的是，它失败并出现错误：I/flutter (14814): needs compositing 和 /flutter (14814): creator: Column ← Padding ← _EffectiveTickerMode ← TickerMode ← Offstage ← Align ← ClipRect ← Column I/flutter (14814): ← Padding ← DecoratedBox ← Container ← AnimatedBuilder ← ⋯ I/flutter (14814): parentData: offset=Offset(0.0, 0.0) (can use size) I/flutter (14814): constraints: BoxConstraints(0.0<=w<=387.4, 0.0<=h<=Infinity) I/flutter (14814): size: MISSING
一种不同类型的错误：I/flutter (14814): The offending constraints were: I/flutter (14814): BoxConstraints(w=18.0, h=Infinity) I/flutter (14814): I/flutter (14814): The relevant error-causing widget was: I/flutter (14814): SizedBox 这真的让我发疯了 2 天。我认为罪魁祸首可能是 ListView。 ://
感谢您的帮助@pskink。 Positioned.fill 取得了部分成功。之后它使用了全高，但它忽略了宽度，所以我的矩形延伸到全屏。然而，来自 검은곰BlackBear 的解决方案奏效了。

标签： flutter widget

【解决方案1】：

您可以通过使用 IntrinsicHeight 类来解决这个问题。如果用 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)
          ],
        ),
      ),
    );
  }

【讨论】：