Flutter Image图片组件的使用

最新推荐文章于 2024-09-08 08:08:25 发布

Magic_小小阿昕

最新推荐文章于 2024-09-08 08:08:25 发布

阅读量723

点赞数

分类专栏：前端 knowledge 文章标签： flutter-Image图片组件的使用

本文链接：https://blog.csdn.net/Amo__/article/details/90207712

版权

本文介绍了Flutter中Image组件的使用，包括加载资源图片、网络图片、本地图片和内存图片的方法，以及fit属性的各种填充模式，如Fill、Contain、Cover等。还详细讲解了图片的混合模式和repeat属性的图片重复选项。

摘要由CSDN通过智能技术生成

加入图片的几种方式

Image.asset: 加载资源图片，就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积，用的是相对路径。
Image.network: 网络资源图片，意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址。
Image.file: 加载本地图片，就是加载本地文件中的图片，这个是一个绝对路径，跟包体无关。
Image.memory: 加载Uint8List资源图片,

fit

BoxFit.fill: 全图显示，图片会被拉伸，并充满父容器。
BoxFit.contain: 全图显示，显示原比例，可能会有空隙。
BoxFit.cover: 显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）。
BoxFit.fitWidth: 宽度充满（横向充满），显示可能拉伸，可能裁切。
BoxFit.fitHeight: 高度充满（竖向充满）,显示可能拉伸，可能裁切。
BoxFit.scaleDown: 效果和contain差不多，但是此属性不允许显示超过源图片大小，可小不可大。

// Flutter 图片组件
import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
   
  @override
  Widget build(BuildContext context){
   
    return MaterialApp(
      title: 'Hello world',
      home: