Corner Radius — 什么是圆角，移动应用中的圆角半径

什么是圆角半径？

Corner radius — 一个数值，用于确定矩形元素角的圆角程度。值越大，角越圆。值为 0 时，角保持直角（90°）；值等于较短边的一半时，元素变为圆形（对于正方形）或带有直边的圆角矩形（胶囊形）。

在移动设计中，圆角半径用于：卡片和磁贴、按钮、输入框、模态窗口、图像和头像、进度指示器、芯片和徽章。每种元素类型都有基于 Material Design 和 Human Interface Guidelines 的建议范围。

根据 Material Design 3（Google，2026），圆角分为三个级别：small（4 dp）用于按钮和输入框，medium（8–12 dp）用于卡片和面板，large（16–28 dp）用于对话框和底部弹出面板。HIG Apple（2025）建议系统元素（UIButton、UITextField）使用统一的 10–12 pt 圆角半径，模态展示使用 20+ pt。

iOS 中的圆角半径：CALayer 和 SwiftUI

在 iOS 上，圆角通过 CALayer 的 cornerRadius 属性实现。在 UIKit 中，每个 UIView 都有一个可以设置 cornerRadius 的图层。对于更复杂的圆角（不同角使用不同半径），使用 maskedCorners 和 CACornerMask 结合 UIBezierPath。

// UIKit：通过 CALayer 圆角
import UIKit

let cardView = UIView()
cardView.backgroundColor = .systemBackground
cardView.layer.cornerRadius = 12
cardView.layer.maskedCorners = [
    .layerMinXMinYCorner,
    .layerMaxXMinYCorner
]

在 SwiftUI 中，圆角通过 cornerRadius() 修饰符或通过带有 RoundedRectangle 的 ClipShape 设置。SwiftUI 还支持通过 UIRectCorner 结合 clipped() 和 overlay() 进行单独的角圆角处理。

// SwiftUI：通过 RoundedRectangle 圆角
import SwiftUI

VStack {
    Text("圆角半径 16")
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 16)
                .fill(Color.blue)
        )
}

// 单独的角圆角
RoundedRectangle(
    cornerSize: CGSize(width: 16, height: 16),
    style: .continuous
)

连续圆角半径 — Apple 自 iOS 7 发布以来在 iOS 中使用的圆角样式。与经典半径（circular）不同，连续半径使用三阶贝塞尔曲线代替圆弧，创建更平滑的圆角。SwiftUI 通过 RoundedRectangle 中的 style: .continuous 参数支持此样式。Apple 建议所有系统元素使用连续圆角半径，因为它在视觉上更自然。

Android 中的圆角半径：shape 和 Compose

在 Android 上，圆角传统上通过 res/drawable 文件夹中的 XML shape 资源实现。Shape 使用 cornerRadius 和 solid 参数定义背景形状。对于不同的角，使用 <、bottom、top 和 <right。在 Material Design 3 中，新增了支持主题和动态形状的 MaterialShapeDrawable。

<!-- res/drawable/bg_card.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white" />
    <corners android:radius="12dp" />
</shape>

在 Jetpack Compose 中，圆角通过 Modifier 的 shape 参数设置。Compose 提供 RoundedCornerShape，支持每个角使用不同的半径和样式（CircularShape 或 CutCornerShape）。Compose 还支持通过 RoundedCornerShape 结合图形轮廓实现连续圆角半径。

// Jetpack Compose：通过 RoundedCornerShape 圆角
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

Card(
    shape = RoundedCornerShape(
        topStart = 16.dp,
        topEnd = 16.dp,
        bottomStart = 4.dp,
        bottomEnd = 4.dp
    ),
    elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
) {
    Text(text = "自定义圆角的卡片")
}

MaterialShapeDrawable 在 Android View System 中允许动态更改圆角半径而无需重新创建 drawable。使用 ShapeAppearanceModel 进行精确配置：为每个角单独设置 cornerFamily（rounded 或 cut）和 cornerSize。

如何选择合适的圆角半径

圆角半径的选择取决于元素类型、使用上下文和平台。虽然没有通用规则，但 Material Design 和 HIG Apple 为标准组件提供了明确的建议。基本原则：圆角应可见，但不妨碍内容。

对比规则：同一界面中具有不同圆角半径的元素应至少相差 4 dp，以使视觉差异明显。不要在一个屏幕中使用 3 级圆角——这会造成视觉噪音。Material Design 3 建议每个屏幕使用不超过两级圆角：一级用于容器（卡片、对话框），一级用于交互元素（按钮、字段）。

Flutter 中的圆角半径

在 Flutter 中，圆角通过 BorderRadius 类实现，该类接受 Radius.circular() 或 Radius.elliptical() 值。Flutter 支持通过 BorderRadius.only() 和 BorderRadius.horizontal()/vertical() 进行单独的圆角处理。ClipRRect 小部件根据指定的 BorderRadius 裁剪子元素。

// Flutter：通过 ClipRRect 和 Container 圆角
import 'package:flutter/material.dart';

Container(
    decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(16.0),
            topRight: Radius.circular(16.0),
            bottomLeft: Radius.circular(4.0),
            bottomRight: Radius.circular(4.0),
        ),
    ),
    child: Text('自定义角圆角'),
)

// 带有 Image 的 ClipRRect
ClipRRect(
    borderRadius: BorderRadius.circular(12.0),
    child: Image.network(
        'https://example.com/image.jpg',
        fit: BoxFit.cover,
    ),
)

ClipRRect 在 Flutter 中用于沿圆角边界裁剪图像或复杂小部件。对于简单的背景容器，带有 borderRadius 的 BoxDecoration 就足够了——这更高效，因为它不会创建单独的裁剪层。Material Flutter 3.22+ 通过 ContinuousRectangleBorder 支持连续圆角半径。