flutter如何实现圆角效果

在Flutter中如何给Container、Image或其他Widget添加圆角效果？有没有通用的实现方法？比如想实现卡片圆角或者头像圆形效果，应该用什么组件或属性？最好能提供简单示例代码说明。

2 回复

Flutter中实现圆角效果常用Container的decoration属性，设置BoxDecoration的borderRadius属性即可。例如：borderRadius: BorderRadius.circular(10.0)。

更多关于flutter如何实现圆角效果的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现圆角效果有多种方式，以下是常用的方法：

1. Container的decoration属性

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(12),
  ),
  child: Text('圆角容器'),
)

2. ClipRRect组件

ClipRRect(
  borderRadius: BorderRadius.circular(16),
  child: Image.network(
    'https://example.com/image.jpg',
    width: 200,
    height: 200,
    fit: BoxFit.cover,
  ),
)

3. 圆角按钮

ElevatedButton(
  style: ElevatedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20),
    ),
  ),
  onPressed: () {},
  child: Text('圆角按钮'),
)

4. 不同方向的圆角

Container(
  decoration: BoxDecoration(
    color: Colors.green,
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(10),
      topRight: Radius.circular(20),
      bottomLeft: Radius.circular(15),
      bottomRight: Radius.circular(5),
    ),
  ),
  width: 200,
  height: 100,
)

5. 圆形效果

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.red,
    shape: BoxShape.circle,
  ),
)

主要参数说明：

  • BorderRadius.circular() - 统一圆角
  • BorderRadius.only() - 分别设置各角
  • BorderRadius.vertical() - 垂直方向圆角
  • BorderRadius.horizontal() - 水平方向圆角

选择哪种方式取决于具体需求：Container适合普通视图，ClipRRect适合裁剪已有组件，按钮样式适合交互元素。

回到顶部