flutter——引入图片，设置图片属性

项目image0221
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: Center(//使用这种方式直接获得居中位置
          child: Container(
            child: new Image.network(
              //图片链接
              "https://cpnet.oss-cn-hangzhou.aliyuncs.com/article/20180828/%E6%A3%AE%E6%99%9F%E5%BB%BA%E8%AE%BE/s3.jpg",
              //图片宽度和高度比
              //scale:1.0,
              // fit: BoxFit.contain,//当外部容器设置了尺寸，这个有必要设置
              repeat: ImageRepeat.repeat,//设置重复模式
              //以下做图片混合颜色设置
              color: Colors.greenAccent,//要混合的颜色
              colorBlendMode: BlendMode.darken,//要混合的模式
            ),
            width: 500,
            height: 500,
            color: Colors.lightBlueAccent,
          ),
        // body: Container(
        //   child: new Image.network(
        //     //图片链接
        //     "https://cpnet.oss-cn-hangzhou.aliyuncs.com/article/20180828/%E6%A3%AE%E6%99%9F%E5%BB%BA%E8%AE%BE/s3.jpg",
        //     //图片宽度和高度比
        //     scale:1.0,
        //     ),
        ),
      ),
    );
  }
}




/*
拷贝的笔记
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差不多，但是此属性不允许显示超过源图片大小，可小不可大

repeat图片重复
ImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整个画布。

ImageRepeat.repeatX: 横向重复，纵向不重复。

ImageRepeat.repeatY：纵向重复，横向不重复。
 
 */
flutter——引入图片，设置图片属性

猜你喜欢
