在容器內使用卡類型 class 時顯示 RenderFlex 溢出錯誤 - Flutter

Question

我試圖在容器內顯示 2 張卡片，但我遇到了相同的 RenderFlex 錯誤。 誰能幫我解決這個問題？

這是完整的錯誤：

════════渲染庫捕獲異常═════════════════════════════════
底部溢出 8.0 像素的 RenderFlex。 導致錯誤的相關小部件是： Column

lib\…\widgets\card_main.dart:60

這是我的代碼：

card_main.dart：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:pfe_app/screens/user_related/bilan_patient_screen.dart';
import 'package:pfe_app/screens/user_related/profile_screen.dart';

import '../constants.dart';
import 'custom_clipper.dart';

class CardMain extends StatelessWidget {
  final ImageProvider image;
  final String title;
  final String value;
  final String unit;
  final Color color;

  CardMain(
      {Key? key,
      required this.image,
      required this.title,
      required this.value,
      required this.unit,
      required this.color})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.topLeft,
      child: Container(
        margin: const EdgeInsets.only(right: 15.0),
        width: ((MediaQuery.of(context).size.width -
                (Constants.paddingSide * 2 + Constants.paddingSide / 2)) /
            2),
        decoration: new BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(10.0)),
          shape: BoxShape.rectangle,
          color: color,
        ),
        child: Material(
          child: InkWell(
            borderRadius: BorderRadius.all(Radius.circular(10.0)),
            child: Stack(
              overflow: Overflow.clip,
              children: <Widget>[
                Positioned(
                  child: ClipPath(
                    clipper: MyCustomClipper(clipType: ClipType.semiCircle),
                    child: Container(
                      decoration: new BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(10.0)),
                        color: Colors.black.withOpacity(0.03),
                      ),
                      height: 120,
                      width: 120,
                    ),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.all(20.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      // Icon and Hearbeat
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                          Image(width: 32, height: 32, image: image),
                          SizedBox(
                            width: 10,
                          ),
                          Expanded(
                            child: Text(
                              title,
                              overflow: TextOverflow.ellipsis,
                              style: TextStyle(
                                  fontSize: 13, color: Constants.textDark),
                            ),
                          ),
                        ],
                      ),
                      SizedBox(height: 10),
                      Text(
                        value,
                        style: TextStyle(
                          fontSize: 30,
                          fontWeight: FontWeight.w900,
                          color: Constants.textDark,
                        ),
                      ),
                      Text(
                        unit,
                        style:
                            TextStyle(fontSize: 15, color: Constants.textDark),
                      ),
                    ],
                  ),
                )
              ],
            ),
            onTap: () {
              debugPrint("CARD main clicked. redirect to details page");
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => ProfileScreen()),
              );
            },
          ),
          color: Colors.transparent,
        ),
      ),
    );
  }
}

這是我使用該卡 class 的部分：

Container(
                height: 140,
                child: ListView(
                  scrollDirection: Axis.horizontal,
                  children: <Widget>[
                    CardMain(
                      image: AssetImage('assets/heartbeat.png'),
                      title: "Hearbeat",
                      value: "66",
                      unit: "bpm",
                      color: Constants.lightGreen,
                    ),
                    CardMain(
                        image: AssetImage('assets/blooddrop.png'),
                        title: "Blood Pressure",
                        value: "66/123",
                        unit: "mmHg",
                        color: Constants.lightYellow)
                  ],
                ),
              ),

Answer 1

每張卡片可以擴展到超過 70 個像素，並且您將容器限制為 140。我在您的 CardMain 中看到的任何內容都不會將其高度限制為 70。因此，要么增加該高度，要么限制您的 CardMain。 根據我的 40+32+10 加兩行 Text 的數學計算，你應該溢出超過 8 個，但也許你的文本是空的。 即使是空文本也會占用高度...使用

unit == '' ? Container() : Text(unit) 

擺脫空文本間距。