Flutter 圆角图片的实现

19 min read

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