如何在 flutter 中创建 2 列 3:1 宽度比的卡片

Question

我正在尝试创建一张卡片，它可以有 2 列，宽度比为 3:1。问题是这张卡片必须根据其内容具有动态高度。 是这样的： 这是我现在拥有的： 红色列顶部和底部的空白也需要是红色的。

这是我的代码：

Card(
      elevation: 2,
      clipBehavior: Clip.antiAlias,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
      margin: const EdgeInsets.only(top: 10, bottom: 0, left: 10, right: 10),
      child: Row(
        children: [
          Flexible(
            flex: 3,
            fit: FlexFit.tight,
            child: Padding(
              padding: const EdgeInsets.symmetric(
                horizontal: 8.0,
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  TimelineTile(
                    alignment: TimelineAlign.start,
                    isFirst: true,
                    afterLineStyle: const LineStyle(color: TruckerAppTheme.grey, thickness: 2),
                    indicatorStyle:
                        IndicatorStyle(color: Colors.white, padding: const EdgeInsets.all(0), iconStyle: IconStyle(fontSize: 28, iconData: Icons.location_on_rounded, color: TruckerAppTheme.grey)),
                    endChild: Container(
                      padding: const EdgeInsets.fromLTRB(8.0, 8, 0, 0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: [
                          SizedBox(
                              // width: MediaQuery.of(context).size.width * 0.65,
                              child: Text(widget.load.pickupCity != null ? "${widget.load.pickupCity}, ${widget.load.pickupState}" : "${widget.load.pickupState}",
                                  overflow: TextOverflow.visible, style: TruckerAppTheme.locationText)),
                          SizedBox(
                              // width: MediaQuery.of(context).size.width * 0.6,
                              child: Text(DateFormat('dd-MMM-yy').format(DateFormat('yyyy-MM-dd').parse(widget.load.pickupTimeStamp!)).toString(),
                                  overflow: TextOverflow.ellipsis, style: TruckerAppTheme.bodyNormalSmall)),
                        ],
                      ),
                    ),
                  ),
                  TimelineTile(
                    alignment: TimelineAlign.start,
                    isLast: true,
                    beforeLineStyle: const LineStyle(color: TruckerAppTheme.grey, thickness: 2),
                    indicatorStyle:
                        IndicatorStyle(color: Colors.white, padding: const EdgeInsets.all(0), iconStyle: IconStyle(fontSize: 28, iconData: Icons.flag_rounded, color: TruckerAppTheme.grey)),
                    endChild: Container(
                      padding: EdgeInsets.fromLTRB(8.0, 8, 0, (widget.load.dropTimeStamp != null) ? 0 : 7),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: [
                          SizedBox(
                              //  width: MediaQuery.of(context).size.width * 0.6,
                              child: Text(widget.load.dropCity != null ? "${widget.load.dropCity}, ${widget.load.dropState}" : "${widget.load.dropState}",
                                  overflow: TextOverflow.visible, style: TruckerAppTheme.locationText)),
                          (widget.load.dropTimeStamp != null)
                              ? Text(DateFormat('dd-MMM-yy').format(DateFormat('yyyy-MM-dd').parse(widget.load.dropTimeStamp!)).toString(),
                                  overflow: TextOverflow.ellipsis, style: TruckerAppTheme.bodyNormalSmall)
                              : Container(),
                        ],
                      ),
                    ),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      widget.load.materialType == ""
                          ? Flexible(
                              child: Padding(
                              padding: const EdgeInsets.only(bottom: 8.0),
                              child: Text(
                                "${widget.load.loadWeight} ${widget.load.loadUnits.toString()[0] + widget.load.loadUnits.toString().substring(1).toLowerCase()} • ${VehicleTypeMapping().vehicleTypeMapping[widget.load.vehicleType!]!.value}",
                                style: TruckerAppTheme.quantityText,
                              ),
                            ))
                          : Flexible(
                              child: Padding(
                              padding: const EdgeInsets.only(bottom: 8.0),
                              child: Text(
                                "${widget.load.loadWeight} ${widget.load.loadUnits.toString()[0] + widget.load.loadUnits.toString().substring(1).toLowerCase()} • ${widget.load.materialType} • ${VehicleTypeMapping().vehicleTypeMapping[widget.load.vehicleType!]!.value}",
                                style: TruckerAppTheme.quantityText,
                              ),
                            )),
                      // const Icon(Icons.arrow_forward, color: Colors.grey)
                    ],
                  )
                ],
              ),
            ),
          ),
          Flexible(
            flex: 1,
            fit: FlexFit.tight,
            child: Container(
              padding: const EdgeInsets.only(bottom: 8, top: 8, right: 8, left: 8),
              margin: EdgeInsets.only(right: 0, top: 0, bottom: 0, left: 1),
              decoration: BoxDecoration(color: TruckerAppTheme.primaryColor.withOpacity(0.5), borderRadius: BorderRadius.circular(0)),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    "Price",
                    style: TruckerAppTheme.quantityText,
                  ),
                  widget.load.perTonneAmount == null
                      ? Text(
                          "Pending",
                          style: TruckerAppTheme.pricePendingText,
                        )
                      : Text(
                          "₹ ${widget.load.perTonneAmount} Per Tonne",
                          style: TruckerAppTheme.pricePendingText,
                        ),
                  const SizedBox(
                    height: 40,
                  ),
                  Text(
                    "Bid Now",
                    style: TextStyle(fontSize: 14),
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    )

我尝试过使用 Intrinsic Height、Expanded 等，但无济于事。

Answer 1

方式 1. 尝试 sizedbox widget

testWidget(BuildContext context) {
        return Card(
          elevation: 2,
          clipBehavior: Clip.antiAlias,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
          margin: const EdgeInsets.only(top: 10, bottom: 0, left: 10, right: 10),
          child: Row(
            children: [
              Expanded(
                  child: Container(
                color: Colors.amber,
              )),
              SizedBox(
                width: MediaQuery.of(context).size.width / 3,
                height: 100,
                child: Flexible(
                    child: Container(
                  color: Colors.blue,
                )),
              )
            ],
          ),
        );
      }

Answer 2

我试过了，它按预期工作。确保

Container

.

的保证金为零

          Card(
              elevation: 2,
              child: Row(
                children: [
                  Flexible(
                    flex: 3,
                    fit: FlexFit.tight,
                    child: Container(
                      color: Colors.black,
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: const [],
                      ),
                    ),
                  ),
                  Flexible(
                    flex: 1,
                    fit: FlexFit.tight,
                    child: Container(
                      color: Colors.red.withOpacity(0.7),
                      padding: const EdgeInsets.all(8),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: const [
                          Padding(
                            padding: EdgeInsets.all(4),
                            child: Text('ITEM!'),
                          ),
                     ...
                        ],
                      ),
                    ),
                  )
                ],
              ))