Flutter 学习笔记（二） 图片组件

图片

图片的加载方式分为两种：一种是远程图片加载，一种是本地图片加载

Image.asset本地图片 / Image.network 远程图片

图片的常用属性：

名称	类型	说明
alignment	Alignment	图片的对齐方式
color 和 colorBlendMode		设置图片的背景颜色，通常和 colorBlendMode 配合一起 使用，这样可以是图片颜色和背景色混合。上面的图片就 是进行了颜色的混合，绿色背景和图片红色的混合
fit	BoxFit	fit 属性用来控制图片的拉伸和挤压，这都是根据父容器来的。 1. BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。2. BoxFit.contain:全图显示，显示原比例，可能会有空隙。3. BoxFit.cover：显示可能拉伸，可能裁切，充满（图片要 充满整个容器，还不变形）。4. BoxFit.fitWidth：宽度充满（横向充满），显示可能拉伸， 可能裁切。5. BoxFit.fitHeight ：高度充满（竖向充满）,显示可能拉 伸，可能裁切。6. BoxFit.scaleDown：效果和 contain 差不多，但是此属 性不允许显示超过源图片大小，可小不可大。
repeat	平铺	1. ImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整 个画布。2. ImageRepeat.repeatX: 横向重复，纵向不重复。3. ImageRepeat.repeatY：纵向重复，横向不重复。
width		宽度 一般结合 ClipOval 才能看到效果
height		高度 一般结合 ClipOval 才能看到效果

网络图片的引入

import 'package:flutter/material.dart'; 

void main() {
  runApp(MyApp());
}

// 自定义组件
// StatelessWidget 抽象类
class MyApp extends StatelessWidget {
  // 抽象类里面的抽象方法
  @override
  // Widget 表示组件，一切皆为组件
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Hello Demo')),
        body: HomeContent(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

// 分离内容组件
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        child: Container(
      child: Image.network(
        "https://lehuimg.hyfarsight.com/FlImuGbR4dETjl7yDyJ8IlCsG7hf",
        alignment: Alignment.bottomRight,
        // 图片颜色的混合模式 color 和 colorBlendMode 必须结合使用
        // color: Colors.blue,
        // colorBlendMode: BlendMode.screen,
        // fit: BoxFit.cover,
        repeat: ImageRepeat.repeat,
      ),
      width: 300,
      height: 300,
      decoration: BoxDecoration(color: Colors.yellow),
    ));
  }
}

实现圆形图片

// 分离内容组件
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        child: Container(
            child: ClipOval(
                child: Image.network(
                    "https://lehuimg.hyfarsight.com/FlImuGbR4dETjl7yDyJ8IlCsG7hf"))
                ));
  }
}

本地图片的引入

本地图片引入配置：

1. 首先再项目的根目录下创建需要的图片文件夹

2. 然后在 pubspec.yaml 配置图片或者是图片文件夹路径

方法一：

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        child: Container(
            child: Image.asset("images/1.jpg")
    ));
  }
}

方法二：

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
          child: Image(image: AssetImage('images/2.jpg')),
    ));
  }
}