Flutter自定义页面指示器实现求助：特定UI组件开发指导

核心Widget选择 #

针对你提供的设计图，推荐用以下Widget组合来复刻：

• Container：作为外层卡片容器，用来设置圆角、阴影和内边距
• Row：实现左侧标识条与右侧内容区的横向布局
• Column：在右侧内容区垂直排列标题、描述文本和操作按钮
• Expanded：确保右侧内容区占满剩余宽度
• Text：展示标题和描述内容，通过style属性匹配设计样式
• TextButton/IconButton：实现底部操作交互

布局结构拆解 #

1. 外层卡片容器：用Container包裹整个组件，通过BoxDecoration添加圆角和阴影，模拟卡片质感
2. 左侧标识条：固定宽度的Container，设置背景色作为侧边视觉标识，与卡片圆角对齐
3. 右侧内容区：通过Column垂直排布，包含：
   • 加粗大字号的标题文本
   • 灰色小字号的描述文本
   • 右对齐的操作按钮组

完整代码示例 #

class CustomCardComponent extends StatelessWidget {
  final String title;
  final String description;
  final Color sideIndicatorColor;
  final VoidCallback onCancel;
  final VoidCallback onConfirm;

  const CustomCardComponent({
    super.key,
    required this.title,
    required this.description,
    required this.sideIndicatorColor,
    required this.onCancel,
    required this.onConfirm,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.2),
            blurRadius: 4,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 左侧侧边标识
          Container(
            width: 4,
            height: double.infinity,
            decoration: BoxDecoration(
              color: sideIndicatorColor,
              borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(12),
                bottomLeft: Radius.circular(12),
              ),
            ),
          ),
          // 右侧内容区域
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(16),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    title,
                    style: const TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.w600,
                      color: Colors.black87,
                    ),
                  ),
                  const SizedBox(height: 8),
                  Text(
                    description,
                    style: const TextStyle(
                      fontSize: 14,
                      color: Colors.grey,
                      height: 1.4,
                    ),
                    maxLines: 3,
                    overflow: TextOverflow.ellipsis,
                  ),
                  const SizedBox(height: 16),
                  // 底部操作按钮组
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      TextButton(
                        onPressed: onCancel,
                        child: const Text(
                          '取消',
                          style: TextStyle(color: Colors.grey),
                        ),
                      ),
                      TextButton(
                        onPressed: onConfirm,
                        child: const Text(
                          '确认',
                          style: TextStyle(color: Colors.blue),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

适配与优化建议 #

• 如果需要卡片点击效果，可在外层Container嵌套InkWell，并添加Ink组件实现水波纹
• 根据设计需求调整卡片的圆角大小、阴影参数、侧边条宽度
• 文本过长时，通过maxLines和TextOverflow.ellipsis控制显示效果
• 若需要动态调整内容高度，可将Column替换为ListView或使用IntrinsicHeight

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