Flutter 入门指南：探索 Image 和 Icon

2023-10-11 04:29:40

前言

Flutter，谷歌推出的跨平台框架，以其强大的功能和直观的用户界面设计而闻名。要掌握 Flutter，了解 Widget（小部件）至关重要。在这篇文章中，我们将深入探讨两种基本的 Widget——Image 和 Icon，它们对于创建美观且有吸引力的应用程序至关重要。

Image Widget

Image Widget 允许您在 Flutter 应用程序中显示图像。它提供了广泛的选项来控制图像的大小、位置和适应方式。

属性：

image： 指定要显示的图像源，可以是本地文件、网络 URL 或内存缓冲区。
fit： 指定图像如何在其显示空间中调整大小，如 BoxFit.cover、BoxFit.contain 和 BoxFit.fill。
repeat： 指定当图像小于显示空间时如何重复图像，如 ImageRepeat.repeat、ImageRepeat.noRepeat 和 ImageRepeat.spaceEvenly。

实例：

import 'package:flutter/material.dart';

class MyImageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Image.network(
      'https://example.com/image.png',
      fit: BoxFit.cover,
    );
  }
}

Icon Widget

Icon Widget 提供了一种简单的方法在应用程序中显示图标。它预定义了一组 Material Design 图标，您还可以使用自定义图标。

属性：

icon： 指定要显示的图标，可以是 Material Design 图标或自定义图标。
color： 设置图标的颜色。
size： 设置图标的大小。

实例：

import 'package:flutter/material.dart';

class MyIconWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Icon(
      Icons.favorite,
      color: Colors.red,
      size: 30.0,
    );
  }
}