如何在Flutter中复刻指定卡片布局？求详细实现流程

布局拆解 #

先明确目标卡片的结构：

• 外层是带圆角、阴影的卡片容器
• 内部采用横向布局，分为左右两部分：
  • 左侧：圆形背景的图标区域
  • 右侧：垂直排列的内容区，包含标题、副标题，以及底部的两个操作项（图标+文本）
• 所有元素之间保留合适间距，整体有内边距

实现步骤 #

1. 外层卡片容器：使用Flutter内置的Card组件，配置阴影（elevation）、圆角（shape）、外边距和内边距，还原卡片的视觉质感。
2. 左侧圆形图标区：用Container配合BoxDecoration实现圆形背景，内部放置图标，设置合适的大小和颜色。
3. 右侧内容区：用Column垂直排列标题、副标题和操作栏：
   • 标题使用加粗、较大字号；副标题使用灰色、较小字号，区分层级。
   • 底部操作栏用Row布局，复用统一的操作项组件（图标+文本），保持样式一致。
4. 适配与间距：用Expanded确保右侧内容在不同屏幕宽度下不会溢出，通过SizedBox控制各元素间的间距，对齐方式设置为居中对齐，还原原图排版。

完整可运行代码 #

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Card Layout Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const Scaffold(
        backgroundColor: Color(0xFFF5F5F5),
        body: Center(child: CustomProfileCard()),
      ),
    );
  }
}

class CustomProfileCard extends StatelessWidget {
  const CustomProfileCard({super.key});

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 3,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            // 左侧圆形图标
            Container(
              width: 60,
              height: 60,
              decoration: const BoxDecoration(
                color: Color(0xFF2196F3),
                shape: BoxShape.circle,
              ),
              child: const Icon(Icons.person, color: Colors.white, size: 32),
            ),
            const SizedBox(width: 16),
            // 右侧内容区
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: [
                  const Text(
                    'John Doe',
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600),
                  ),
                  const SizedBox(height: 4),
                  Text(
                    'john.doe@example.com',
                    style: TextStyle(fontSize: 14, color: Colors.grey[600]),
                  ),
                  const SizedBox(height: 12),
                  // 操作栏
                  Row(
                    children: [
                      _buildAction(Icons.call, 'Call'),
                      const SizedBox(width: 24),
                      _buildAction(Icons.message, 'Message'),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 复用操作项组件
  Widget _buildAction(IconData icon, String label) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Icon(icon, color: const Color(0xFF2196F3), size: 18),
        const SizedBox(width: 4),
        Text(
          label,
          style: const TextStyle(fontSize: 14, color: Color(0xFF2196F3)),
        ),
      ],
    );
  }
}

自定义调整说明 #

• 颜色：可以修改BoxDecoration的color、文本和图标的颜色，匹配原图的配色。
• 尺寸：调整Container的宽高、字体大小、图标大小，还原原图的比例。
• 阴影：修改Card的elevation值，控制阴影的深浅。

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