Flutter添加Column后卡片显示空白问题求助

核心问题分析 #

你添加Column后卡片为空，本质是布局约束冲突：外层Container固定了height=150，新增的Column默认会尝试占据最大高度，但嵌套的Row和内部的Spacer/Expanded没有正确适配这个约束，导致布局计算异常，最终Widget无法渲染。

修复方案+功能实现 #

以下是修改后的完整代码，同时实现「第一列默认可见，第二列通过操作控制显示」的需求：

class CardItem extends StatefulWidget {
  final Map data;
  const CardItem({super.key, required this.data});

  @override
  State<CardItem> createState() => _CardItemState();
}

class _CardItemState extends State<CardItem> {
  // 控制第二列显示的状态变量
  bool _showSecondColumn = false;

  @override
  Widget build(BuildContext context) {
    var img = widget.data['password'];
    return Card(
      color: const Color.fromARGB(255, 55, 55, 55),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
        side: const BorderSide(
          color: Color.fromARGB(255, 60, 60, 60),
          width: 1.0,
        ),
      ),
      child: ClipPath(
        clipper: ShapeBorderClipper(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(15),
          ),
        ),
        child: Container(
          height: 150,
          decoration: const BoxDecoration(
            border: Border(
              left: BorderSide(
                  color: Color.fromARGB(255, 143, 175, 112), width: 10),
            ),
            color: Color.fromARGB(255, 242, 241, 241),
          ),
          padding: const EdgeInsets.all(10.0),
          child: Row(
            children: [
              Expanded(
                flex: 4,
                child: Column(
                  // 让Column子项从顶部开始排列，避免空占空间
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    // 第一列：原有的Row内容
                    Expanded(
                      child: Row(
                        children: [
                          Expanded(
                            flex: 9,
                            child: Column(
                              children: [
                                const SizedBox(height: 10),
                                Image.asset(
                                  'assets/bank_logos/$img.png',
                                  height: 60,
                                ),
                                const Spacer(),
                                Text(img),
                                const SizedBox(height: 10),
                              ],
                            ),
                          ),
                          Expanded(
                            flex: 1,
                            child: CustomPaint(painter: DashedLinePainter()),
                          ),
                        ],
                      ),
                    ),
                    // 第二列：通过状态控制显示
                    if (_showSecondColumn)
                      const Padding(
                        padding: EdgeInsets.only(top: 8.0),
                        child: Text("第二列自定义内容"),
                      ),
                  ],
                ),
              ),
              Expanded(
                flex: 6,
                child: Column(
                  children: [
                    const SizedBox(height: 15),
                    Row(
                      children: [
                        const Icon(
                          Icons.person,
                          color: Color.fromARGB(255, 93, 93, 93),
                          size: 22.0,
                        ),
                        const SizedBox(width: 5),
                        const Text("Hussain"),
                        const SizedBox(width: 15),
                        // 新增：控制第二列显示的切换按钮
                        IconButton(
                          onPressed: () {
                            setState(() {
                              _showSecondColumn = !_showSecondColumn;
                            });
                          },
                          icon: Icon(
                            _showSecondColumn
                                ? Icons.expand_less
                                : Icons.expand_more,
                            color: const Color.fromARGB(255, 168, 168, 168),
                            size: 18.0,
                          ),
                        ),
                      ],
                    ),
                    const SizedBox(height: 10),
                    Row(
                      children: [
                        const Icon(
                          Icons.lock,
                          color: Color.fromARGB(255, 93, 93, 93),
                          size: 22.0,
                        ),
                        const SizedBox(width: 5),
                        const Text("*****"),
                        const SizedBox(width: 15),
                        IconButton(
                          onPressed: () {
                            print("copied");
                          },
                          icon: const Icon(
                            Icons.content_copy,
                            color: Color.fromARGB(255, 168, 168, 168),
                            size: 18.0,
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// 保持你的DashedLinePainter实现不变
class DashedLinePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // 这里保留你原有的虚线绘制逻辑
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

关键修改点 #

1. 转为StatefulWidget：新增_showSecondColumn状态变量，用于控制第二列的显示/隐藏。
2. 修复Column布局：
   • 给Column设置mainAxisAlignment: MainAxisAlignment.start，避免子Widget空占多余空间。
   • 用Expanded包裹原有的Row，让它适配外层固定的150px高度，解决布局约束冲突。
3. 添加控制交互：在右侧列的Row中加入切换按钮，通过setState更新状态，实现第二列的显示控制。

内容的提问来源于stack exchange，提问作者mkHun