Flutter自定义卡片Widget：如何正确放置底部文本'Aktif'？

问题出在你自定义的CardShape虽然画出了底部突出的形状，但Card的实际布局边界并未包含这部分额外高度，同时Stack默认会裁剪超出范围的子组件，导致Text无法正确显示在目标位置。以下是修复步骤和代码：

1. 调整Stack和Card的布局参数 #

• 给Stack添加clipBehavior: Clip.none，允许子组件超出Stack范围显示
• 给Card设置底部margin，留出突出部分的空间（对应shape里的20px高度）
• 调整Positioned的bottom值，让Text落在突出区域内

2. 优化CardShape的内部路径 #

修改getInnerPath，确保Card内部内容区域不包含底部突出部分，避免内部组件被裁剪或遮挡

修改后的完整代码 #

Build方法：

@override
Widget build(BuildContext context) {
  return Stack(
    clipBehavior: Clip.none, // 允许子组件超出Stack范围显示
    children: [
      Card(
        shape: const CardShape(),
        elevation: 18,
        shadowColor: const Color.fromRGBO(51, 0, 0, 0.1),
        color: CustomStyle.primaryRed,
        margin: const EdgeInsets.only(bottom: 20), // 留出底部突出部分的空间
        child: Container(
          decoration: BoxDecoration(
            color: CustomStyle.white,
            border: Border.all(color: CustomStyle.primaryRed),
            borderRadius: BorderRadius.circular(8),
          ),
          padding: const EdgeInsets.symmetric(vertical: 8),
          child: const ListTile(
            title: Text('Rumah Tanggerang'),
            subtitle: Text('Primary - 1234567890'),
            trailing: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Text('DEFAULT'),
                myPopMenu()
              ],
            ),
          ),
        ),
      ),
      Positioned(
        left: 10,
        bottom: 5, // 调整此值让文本在突出区域居中
        child: const Text(
          'Aktif',
          style: TextStyle(color: Colors.white), // 适配红色背景的文字颜色
        ),
      ),
    ],
  );
}

修改后的CardShape：

class CardShape extends ShapeBorder {
  const CardShape();

  final BorderSide _side = BorderSide.none;
  final BorderRadiusGeometry _borderRadius = BorderRadius.zero;

  @override
  EdgeInsetsGeometry get dimensions => EdgeInsets.all(_side.width);

  @override
  Path getInnerPath(
    Rect rect, {
    TextDirection? textDirection,
  }) {
    final Path path = Path();
    // 内部路径匹配卡片上半部分，不包含底部突出区域
    path.moveTo(0, 10);
    path.quadraticBezierTo(0, 0, 10, 0);
    path.lineTo(rect.width - 10, 0);
    path.quadraticBezierTo(rect.width, 0, rect.width, 10);
    path.lineTo(rect.width, rect.height - 10);
    path.quadraticBezierTo(rect.width, rect.height, rect.width - 10, rect.height);
    path.lineTo(10, rect.height);
    path.quadraticBezierTo(0, rect.height, 0, rect.height - 10);
    path.close();

    return path;
  }

  @override
  Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
    final Path path = Path();
    final RRect rrect = _borderRadius.resolve(textDirection).toRRect(rect);

    path.moveTo(0, 10);
    path.quadraticBezierTo(0, 0, 10, 0);
    path.lineTo(rrect.width - 10, 0);
    path.quadraticBezierTo(rrect.width, 0, rrect.width, 10);
    path.lineTo(rrect.width, rrect.height - 10);
    path.quadraticBezierTo(
        rrect.width, rrect.height, rrect.width - 10, rrect.height);
    path.lineTo(100, rrect.height);
    path.lineTo(80, rrect.height + 20);
    path.lineTo(10, rrect.height + 20);
    path.quadraticBezierTo(0, rrect.height + 20, 0, rrect.height + 10);

    return path;
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection? textDirection}) {}

  @override
  ShapeBorder scale(double t) => RoundedRectangleBorder(
        side: _side.scale(t),
        borderRadius: _borderRadius * t,
      );
}

关键说明 #

• clipBehavior: Clip.none：解决Stack裁剪超出子组件的问题，让Text能显示在卡片底部的突出区域
• margin: EdgeInsets.only(bottom:20)：让Stack的布局范围包含卡片底部的突出部分，确保Positioned的位置计算准确
• 调整getInnerPath：避免Card内部的ListTile等组件延伸到底部突出区域，保证内容布局正常

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