flutter Image - 技术栈

Flutter中，Image是一个用于显示图片的控件，可以显示网络图片、本地图片以及Asset中的图片。Image控件支持多种常见的图片格式，例如PNG、JPEG、GIF等。

Dart 复制代码

  const Image({
    super.key,
    required this.image,
    this.frameBuilder,
    this.loadingBuilder,
    this.errorBuilder,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width,
    this.height,
    this.color,
    this.opacity,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.isAntiAlias = false,
    this.filterQuality = FilterQuality.low,
  })

Image控件重要属性

Image.network：指定显示的网络图片的URL，用于加载网络图片。

Image.asset：指定显示的本地图片的Asset路径，用于加载Asset目录下的图片。

width和height：设置图片的宽度和高度。

Image.asset

通过Image.asset加载本地图片

Dart 复制代码

import 'package:flutter/material.dart';

class ImageDemoPage extends StatelessWidget {
  const ImageDemoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("ImageDemoPage"),
      ),
      body: Container(
        alignment: Alignment.center,
        margin: const EdgeInsets.all(10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text("TEST IMAGE"),
            Container(
                width: 100,
                height: 100,
                child: Image.asset("static/test_image.png"))
          ],
        ),
      ),
    );
  }
}

Image.network

用于加载网络图片。

Dart 复制代码

import 'package:flutter/material.dart';

class ImageDemoPage extends StatelessWidget {
  const ImageDemoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("ImageDemoPage"),
      ),
      body: Container(
        alignment: Alignment.center,
        margin: const EdgeInsets.all(10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text("TEST IMAGE"),
            Container(
                width: 100,
                height: 100,
                child: Image.network("https://cdn.carlcare.com/carlcare/default/1273327404667740207"))
          ],
        ),
      ),
    );
  }
}

实现圆角的几种方式

使用BoxDecoration+DecorationImage+AssetImage实现

Dart 复制代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ImageDemoPage extends StatelessWidget {
  const ImageDemoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("ImageDemoPage"),
      ),
      body: Container(
        alignment: Alignment.center,
        margin: const EdgeInsets.all(10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text("USE BoxDecoration"),
            Container(
              width: 100,
              height: 100,
              decoration: const BoxDecoration(
                  color: Colors.blue,
                  image: DecorationImage(
                    fit: BoxFit.cover,
                    image: AssetImage("static/test_image.png"),
                  ),
                  borderRadius: BorderRadius.all(Radius.circular(10.0))),
            )
          ],
        ),
      ),
    );
  }
}

ClipRRect+Image实现

Dart 复制代码

class ImageDemoPage extends StatelessWidget {
  const ImageDemoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("ImageDemoPage"),
      ),
      body: Container(
        alignment: Alignment.center,
        margin: const EdgeInsets.all(10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text("USE ClipRRect"),
            ClipRRect(
              borderRadius: const BorderRadius.all(Radius.circular(10.0)),
              child: Image.asset(
                "static/test_image.png",
                fit: BoxFit.cover,
                width: 100,
                height: 100,
              ),
            )
          ],
        ),
      ),
    );
  }
}