Flutter入门之Image图片组件

最新推荐文章于 2023-07-31 09:05:35 发布

唯美星辉

最新推荐文章于 2023-07-31 09:05:35 发布

阅读量377

点赞数 1

分类专栏： Flutter-Base

本文链接：https://blog.csdn.net/weimeig/article/details/100863013

版权

本文介绍了在Flutter中使用Image组件的四种方法：Image.asset、Image.network、Image.file和Image.memory。接着详细讨论了scale属性，用于调整图片在父容器内的大小；fit属性，控制图片的拉伸和挤压模式；以及colorBlendMode属性，结合color实现图片颜色混合效果。最后，阐述了Image组件的repeat属性，用于图片的重复显示。

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

加入图片的几种方式

Image.asset:加载资源图片，就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积，用的是相对路径。

Image.network:网络资源图片，意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址。

Image.file:加载本地图片，就是加载本地文件中的图片，这个是一个绝对路径，跟包体无关。

Image.memory: 加载Uint8List资源图片。

我们现在就以加入网络图片为例子，在Container里加入一张图片，代码如下：

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

const ImageUrl='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568559184580&di=6937bbec9db26c1234f7f4ba717e63ac&imgtype=0&src=http%3A%2F%2Fphotocdn.sohu.com%2F20130327%2FImg370528942.jpg';
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:&