flutter如何实现圆角效果

在Flutter中如何为Container、Image或其他Widget添加圆角效果？有没有简单的方法可以实现不同角度的圆角，比如只设置左上和右下角为圆角？另外，圆角效果会不会影响性能，特别是在列表中有大量圆角元素时？

2 回复

Flutter中实现圆角效果可使用Container的decoration属性，设置BoxDecoration的borderRadius属性。例如：

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10.0),
  ),
)

也可用ClipRRect包裹子组件实现。

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


在 Flutter 中，实现圆角效果主要通过 BorderRadius 和 ClipRRect 等组件。以下是几种常见方法：

1. Container 的 decoration 属性

使用 BoxDecoration 设置圆角：

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(12.0),
    color: Colors.blue,
  ),
  width: 100,
  height: 100,
)

2. ClipRRect 组件

裁剪子组件为圆角：

ClipRRect(
  borderRadius: BorderRadius.circular(8.0),
  child: Image.network('https://example.com/image.jpg'),
)

3. 圆角按钮

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

4. Card 组件

Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(15.0),
  ),
  child: ListTile(title: Text('圆角卡片')),
)

5. 自定义不规则圆角

BorderRadius.only(
  topLeft: Radius.circular(10),
  topRight: Radius.circular(20),
  bottomLeft: Radius.circular(5),
  bottomRight: Radius.circular(15),
)

主要参数说明：

  • BorderRadius.circular() - 统一圆角
  • BorderRadius.vertical() - 垂直方向圆角
  • BorderRadius.horizontal() - 水平方向圆角

选择方法：

  • 普通容器建议用 Container + BoxDecoration
  • 图片裁剪用 ClipRRect
  • 按钮和卡片使用各自组件的 shape 参数
回到顶部