Flutter中如何实现圆角矩形嵌套堆叠及颜色衔接效果

要实现你要的堆叠衔接效果，核心是根据每个矩形在列表中的位置动态设置圆角，让相邻矩形的衔接处无圆角，直接用各自的背景色连贯过渡。具体实现步骤如下：

1. 给组件添加位置判断参数 #

修改你的ExpenseItem组件，新增isFirst和isLast两个布尔参数，用来标记当前矩形是列表的第一个还是最后一个项：

class ExpenseItem extends StatelessWidget {
  final Expense expense;
  final Color backgroundColor;
  final Color amountColor;
  final bool isFirst;
  final bool isLast;

  const ExpenseItem({
    super.key,
    required this.expense,
    required this.backgroundColor,
    required this.amountColor,
    this.isFirst = false,
    this.isLast = false,
  });

  @override
  Widget build(BuildContext context) {
    // 根据位置动态生成圆角
    final borderRadius = () {
      if (isFirst && isLast) {
        // 列表只有一项时，保留全圆角
        return BorderRadius.circular(16);
      } else if (isFirst) {
        // 第一项只保留顶部圆角
        return const BorderRadius.only(
          topLeft: Radius.circular(16),
          topRight: Radius.circular(16),
          bottomLeft: Radius.circular(0),
          bottomRight: Radius.circular(0),
        );
      } else if (isLast) {
        // 最后一项只保留底部圆角
        return const BorderRadius.only(
          topLeft: Radius.circular(0),
          topRight: Radius.circular(0),
          bottomLeft: Radius.circular(16),
          bottomRight: Radius.circular(16),
        );
      } else {
        // 中间项取消所有圆角
        return BorderRadius.zero;
      }
    }();

    return Container(
      decoration: BoxDecoration(
        color: backgroundColor,
        borderRadius: borderRadius,
      ),
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Row(
          children: [
            const SizedBox(width: 16),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    expense.description,
                    style: const TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                      color: Colors.black,
                    ),
                  ),
                  Text(
                    DateFormat('dd/MM/yyyy').format(expense.date),
                    style: TextStyle(
                      fontSize: 14,
                      color: Colors.grey[600],
                    ),
                  ),
                ],
              ),
            ),
            Text(
              '${expense.amount.toStringAsFixed(2)} €',
              style: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.bold,
                color: amountColor,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

2. 使用组件时传入位置参数 #

在渲染列表（比如ListView.builder）时，根据当前项的索引判断是否为第一项或最后一项，传入对应的参数即可：

ListView.builder(
  itemCount: expenses.length,
  // 取消默认的item间距，确保颜色无缝衔接
  padding: EdgeInsets.zero,
  itemBuilder: (context, index) {
    final expense = expenses[index];
    return ExpenseItem(
      expense: expense,
      // 示例：交替设置背景色，可替换为自己的颜色逻辑
      backgroundColor: index % 2 == 0 ? Colors.blue[100]! : Colors.green[100]!,
      amountColor: expense.amount >= 0 ? Colors.green : Colors.red,
      isFirst: index == 0,
      isLast: index == expenses.length - 1,
    );
  },
)

效果说明 #

• 第一个矩形仅显示顶部圆角，底部为直角，与下一个矩形的顶部直角无缝衔接，下一个矩形的背景色直接延续
• 中间的矩形无圆角，完全填充衔接区域
• 最后一个矩形仅显示底部圆角，保证整体列表的底部圆角效果

这样就能轻松实现你要的堆叠衔接效果，每个矩形的背景色自然过渡，无突兀的圆角间隙。

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