如何创建该Flutter Widget？求技术实现方案

整体布局思路 #

• 用Card作为外层容器实现圆角阴影效果
• 内部通过Column垂直拆分头部、内容区、底部操作栏三个模块
• 头部用Row实现标题与右侧操作按钮的左右分布
• 内容区根据需求选择固定布局或滚动布局（ListView）
• 底部操作栏用Row配合MainAxisAlignment控制按钮位置

完整代码实现 #

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      elevation: 3,
      borderRadius: BorderRadius.circular(12),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          // 头部区域
          Padding(
            padding: const EdgeInsets.fromLTRB(16, 12, 16, 12),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                const Text(
                  '标题文本',
                  style: TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                IconButton(
                  padding: EdgeInsets.zero,
                  icon: const Icon(Icons.more_horiz),
                  onPressed: () {
                    // 右侧按钮点击逻辑
                  },
                ),
              ],
            ),
          ),
          // 分割线
          const Divider(height: 1, color: Colors.grey.shade200),
          // 内容区域
          Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text(
                  '主要内容展示区',
                  style: TextStyle(fontSize: 16),
                ),
                const SizedBox(height: 8),
                Text(
                  '辅助说明文本',
                  style: TextStyle(color: Colors.grey.shade600, fontSize: 14),
                ),
                // 可添加图片、输入框等其他Widget
              ],
            ),
          ),
          // 底部操作按钮区
          Padding(
            padding: const EdgeInsets.fromLTRB(16, 0, 16, 12),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                TextButton(
                  onPressed: () {
                    // 取消操作逻辑
                  },
                  child: const Text('取消'),
                ),
                const SizedBox(width: 8),
                ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    borderRadius: BorderRadius.circular(8),
                  ),
                  onPressed: () {
                    // 确认操作逻辑
                  },
                  child: const Text('确认'),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

// 调用示例
void main() {
  runApp(const MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('自定义Widget示例')),
      body: TargetWidget(),
    ),
  ));
}

按需调整建议 #

• 若内容过长，将内容区的Column替换为ListView并设置shrinkWrap: true实现滚动
• 修改Card的color、elevation属性调整卡片样式
• 底部按钮可通过修改MainAxisAlignment改为左对齐或居中布局
• 头部右侧按钮可替换为图标或文本按钮

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