Flutter 轻松掌握图片加载和圆角设置，让你的应用视觉更惊艳！

2023-09-30 11:02:50

在 Flutter 中，图片加载和圆角设置是两个重要的技巧，可以帮助你构建更美观的应用。无论是本地图片还是网络图片，你都可以轻松地将它们加载到你的应用中，并设置圆形或圆角的样式。

设置本地图片 Image.asset

要加载本地图片，你可以使用 Image.asset 小组件。Image.asset 小组件接受一个 assetName 参数，该参数指定要加载的图片的路径。例如，要加载名为 "logo.png" 的本地图片，你可以使用以下代码：

Image.asset('assets/logo.png'),

设置网络图片 Image.network

要加载网络图片，你可以使用 Image.network 小组件。Image.network 小组件接受一个 src 参数，该参数指定要加载的图片的 URL。例如，要加载名为 "https://example.com/logo.png" 的网络图片，你可以使用以下代码：

Image.network('https://example.com/logo.png'),

设置圆形图片

要设置圆形图片，你可以使用 ClipOval 小组件。ClipOval 小组件接受一个 child 参数，该参数指定要裁剪的图片。例如，要将 Image.asset 小组件裁剪为圆形，你可以使用以下代码：

ClipOval(
  child: Image.asset('assets/logo.png'),
),

设置有小圆角图片

要设置有小圆角图片，你可以使用 ClipRRect 小组件。ClipRRect 小组件接受一个 borderRadius 参数，该参数指定要裁剪的圆角的半径。例如，要将 Image.asset 小组件裁剪为有小圆角的图片，你可以使用以下代码：

ClipRRect(
  borderRadius: BorderRadius.circular(10.0),
  child: Image.asset('assets/logo.png'),
),

总的代码

将上面所有的代码整合起来，就可以实现图片加载和圆角设置。以下是一个完整的示例：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: ClipRRect(
            borderRadius: BorderRadius.circular(10.0),
            child: Image.network(
              'https://example.com/logo.png',
            ),
          ),
        ),
      ),
    );
  }
}