Flutter 圆角图片可以通过使用 ClipRRect
来实现。ClipRRect
是一个可以将子组件切成圆角矩形的 widget,可以控制圆角的大小。
下面是一个示例代码:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
),
body: Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Image.network(
'https://picsum.photos/200/300',
width: 200.0,
height: 300.0,
fit: BoxFit.cover,
),
),
),
),
);
}
}
在这个示例中,我们使用了 ClipRRect
包装了一个网络图片,并设置了圆角半径为 20.0。fit
属性控制了图片在容器中的缩放方式。在这个例子中,我们使用 BoxFit.cover
来填充整个容器。
输出结果如下图所示:
关于 ClipRRect 的更多用法,可以参考官方文档:https://api.flutter.dev/flutter/widgets/ClipRRect-class.html。