案例概述

BorderRadius 用于创建圆角效果。通过 BorderRadius 可以为容器添加圆角。本案例展示了如何创建各种圆角效果。

核心概念

1. BorderRadius 基础

BorderRadius 是创建圆角的主要方式。

2. 圆角类型

支持统一圆角、部分圆角等。

3. 圆形效果

可以创建完全圆形效果。

代码详解

示例 1：统一圆角

class UniformBorderRadiusExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(8),
      ),
    );
  }
}

代码解释： 这个示例展示了 BorderRadius 的基础用法。BorderRadius.circular(8) 为所有四个角添加相同的 8 像素圆角。圆角使容器看起来更柔和、更现代。在 Material Design 中，圆角是重要的设计元素，通常用于卡片、按钮、输入框等组件。8 像素是常见的默认值，可根据设计规范调整。

示例 2：部分圆角

class PartialBorderRadiusExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      decoration: BoxDecoration(
        color: Colors.green,
        borderRadius: const BorderRadius.only(
          topLeft: Radius.circular(16),
          topRight: Radius.circular(16),
        ),
      ),
    );
  }
}

代码解释： 这个示例使用 BorderRadius.only() 为特定角添加圆角。这里只为顶部两个角（topLeft 和 topRight）添加 16 像素圆角，底部角保持直角。这种部分圆角常用于标签页、底部弹出面板、卡片顶部等场景，能创建独特的视觉效果。

示例 3：圆形效果

class CircularBorderRadiusExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      decoration: BoxDecoration(
        color: Colors.red,
        borderRadius: BorderRadius.circular(50),
      ),
    );
  }
}

代码解释： 这个示例通过将 BorderRadius 设置为宽度的一半（50）来创建完全圆形。当圆角半径大于等于容器宽度/高度的一半时，容器就变成了圆形。这种效果常用于头像、徽章、浮动按钮等圆形 UI 元素。

示例 4：不同圆角

class DifferentBorderRadiusExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      decoration: BoxDecoration(
        color: Colors.orange,
        borderRadius: const BorderRadius.only(
          topLeft: Radius.circular(4),
          topRight: Radius.circular(8),
          bottomLeft: Radius.circular(12),
          bottomRight: Radius.circular(16),
        ),
      ),
    );
  }
}

代码解释： 这个示例为每个角设置不同的圆角半径，创建非对称的圆角效果。虽然这种设计不常见，但在特殊的创意设计中可能会用到。通常，对称的圆角（如全部相同或仅顶部/底部相同）更符合设计规范。

示例 5：卡片圆角

class CardBorderRadiusExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12),
      ),
      child: Container(
        width: 100,
        height: 100,
        color: Colors.purple,
      ),
    );
  }
}

代码解释： 这个示例展示了如何为 Card 组件自定义圆角。通过 shape 参数传入 RoundedRectangleBorder，可以覆盖 Card 的默认圆角。Card 默认有 4 像素圆角，这里改为 12 像素，使卡片看起来更圆润。这种自定义方式适合需要特定圆角风格的设计。

高级话题

1. 动态/响应式设计

根据屏幕大小调整圆角。

2. 动画与过渡

自定义圆角动画。

3. 搜索/过滤/排序

在搜索中使用圆角。

4. 选择与批量操作

支持批量操作。

5. 加载与缓存

显示加载状态。

6. 键盘导航

支持键盘快捷键。

7. 无障碍支持

提供无障碍支持。

8. 样式自定义

自定义样式。

9. 数据持久化/导出

保存状态。

10. 单元测试与集成测试

测试功能。

PC 端适配要点

• 根据屏幕大小调整圆角
• 支持键盘快捷键
• 提供清晰的视觉效果

实际应用场景

• 卡片设计：添加卡片圆角
• 按钮设计：添加按钮圆角
• 输入框设计：添加输入框圆角
• 图片设计：添加图片圆角

扩展建议

• 学习高级圆角库
• 研究性能优化
• 探索自定义效果
• 集成效果库

总结

BorderRadius 是创建圆角效果的基础。通过灵活使用 BorderRadius，可以创建各种圆角效果。
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net