flutter Image

2024-09-05 22:20

文章标签 image flutter

本文主要是介绍flutter Image，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

  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加载本地图片

import 'package:flutter/material.dart';class ImageDemoPage extends StatelessWidget {const ImageDemoPage({super.key});@overrideWidget 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

用于加载网络图片。

import 'package:flutter/material.dart';class ImageDemoPage extends StatelessWidget {const ImageDemoPage({super.key});@overrideWidget 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实现

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';class ImageDemoPage extends StatelessWidget {const ImageDemoPage({super.key});@overrideWidget 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实现

class ImageDemoPage extends StatelessWidget {const ImageDemoPage({super.key});@overrideWidget 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,),)],),),);}
}