Flutter学习笔记03-从本地和网络加载图片、图片剪切、圆形图片

参考学习视频：https://www.bilibili.com/video/BV1S4411E7LY?p=22&vd_source=cee744cae4ead27f8193fc7904647073

视频内容的学习笔记：

1.使用Image.network()加载网络上的图片 👇

import 'package:flutter/material.dart';

void main() {
  //const : 多个相同的实例共享存储空间
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text("你好flutter")),
      body: MyApp(),
    ),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 550,
        width: 350,
        decoration: BoxDecoration(color: Colors.yellow),
        child: Image.network(
          "https://ts1.cn.mm.bing.net/th/id/R-C.66d5a9697396686cdc8efc7120b7154c?rik=415zEyrciDEaAw&riu=http%3a%2f%2fimg.sccnn.com%2fbimg%2f338%2f69029.jpg&ehk=khOu9xd4mUiD5S6lrcQfvSDYIlzhfrzgfAlOQSsoSF8%3d&risl=&pid=ImgRaw&r=0",
          // scale: 2,
          // fit: BoxFit.cover,
          repeat: ImageRepeat.repeatY,
          width: 100,
          height: 100,
          // alignment: Alignment.topLeft,
        ),
      ),
    );
  }
}

2.实现显示圆形图片，使用到了BoxDecoration的borderRadius属性将半径设置为宽高的一半。👇

//实现一个圆形图片
class Circular extends StatelessWidget {
  const Circular({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 150,
      width: 150,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(75),
          color: Colors.yellow,
          image: DecorationImage(
              fit: BoxFit.cover,
              image: NetworkImage(
                  "https://ts1.cn.mm.bing.net/th/id/R-C.66d5a9697396686cdc8efc7120b7154c?rik=415zEyrciDEaAw&riu=http%3a%2f%2fimg.sccnn.com%2fbimg%2f338%2f69029.jpg&ehk=khOu9xd4mUiD5S6lrcQfvSDYIlzhfrzgfAlOQSsoSF8%3d&risl=&pid=ImgRaw&r=0"))),
    );
  }
}

3.ClipOval实现圆角图片。👇
封装一个ClipImage类，返回ClipOval（默认是椭圆）

class ClipImage extends StatelessWidget {
  const ClipImage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ClipOval(
      child: Image.network(
        "https://ts1.cn.mm.bing.net/th/id/R-C.66d5a9697396686cdc8efc7120b7154c?rik=415zEyrciDEaAw&riu=http%3a%2f%2fimg.sccnn.com%2fbimg%2f338%2f69029.jpg&ehk=khOu9xd4mUiD5S6lrcQfvSDYIlzhfrzgfAlOQSsoSF8%3d&risl=&pid=ImgRaw&r=0",
        width: 150,
        height: 150,
        fit: BoxFit.cover,
      ),
    );
  }
}

4.加载本地图片👇

首先要先在本地配置好图片，创建如下目录
2.0x \ 3.0x 为了适配不同分辨率，这两个文件里都要放一份文件名相同的图片资源

配置好后，还需要修改pubspec.yaml文件

# To add assets to your application, add an assets section, like this:
assets:
  - images/2.0x/linfen_icon.png
  - images/3.0x/linfen_icon.png
  - images/linfen_icon.png

封装一个加载本地图片控件

class LocalImage extends StatelessWidget {
  const LocalImage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 150,
      height: 150,
      decoration: BoxDecoration(
        color: Colors.yellow,
      ),
      child: Image.asset(
        "images/linfen_icon.png",
        fit: BoxFit.cover,
      ),
    );
  }
}

总结：本节主要讲了如何从网络or本地加载图片、以及将图片显示成圆形的两种方法。