小菜鸡开始学习flutter之十九

47 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第19天,点击查看活动详情

今日目标

今天来学习了解常用的控件Image,毕竟在我们制作的应用中图片是不可缺少的表现形式之一。
在我们的flutter中引入图片的方式有很多,今天我们只学习两个最常用的方式:
Image.asset 本地图片
Image.network 远程图片

Image组件的常用属性

属性类型说明
alignmentAlignment图片的对齐方式
color和colorBlendMode设置图片的背景色,通常和colorBlendMode配合在一起使用,这样可以让图片颜色和背景色混合。
fitBoxFitfit属性用来控制图片的拉伸和挤压
fill:全图希纳是,图片会被拉伸充满父容器
contain:全图显示,显示原比例,可能会有空隙
cover:显示可能拉伸,可能裁切,充满(图片要充满整个容器同时保持不变形)
fitWidth: 宽度充满,显示可能拉伸,可能裁切
fitHeight:高度充满,显示可能拉伸,可能裁切
scaleDown:效果和contain差不多,但是此属性不允许超过源图片大小,也就是显示可以缩小但不能放大。
repeatImageRepeatrepeat:横向和纵向都进行重复,直到铺满整个容器
repeatX:横向重复,纵向不重复
repeatY:纵向重复,横向不重复
width设置图片宽度
height设置图片高度

Image.network

我们可以直接将图片放到center组件里就显示出来,不过还是建议大家放到Container组件里,这样方便我们去控制它的显示形式

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: const Text('你太有才了-Flutter'),
      ),
      body: HomeContent(),
    ));
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 800,
        height: 400,
        decoration: BoxDecoration(
          color: Colors.yellowAccent,
        ),
        child: Image.network(
          'https://p9-passport.byteacctimg.com/img/user-avatar/c21cdb224f42c072c2bb55075c9adf8d~300x300.image',
          alignment: Alignment.bottomCenter,
          color: Colors.blue,
          colorBlendMode: BlendMode.softLight,
          // fit: BoxFit.cover,
          repeat: ImageRepeat.repeatX,
          )
      ) 
    );
  }
}

image.png

实现圆角和圆形图片

同上上面的例子我们轻松的在flutter中展示了一张网路图片,但是如果我们像展示的图片像掘金头像一样是一个圆形怎么搞呢?接下来继续一探究竟~\

方法1: 通过容器的borderRadius属性实现

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      width: 300,
      height: 300,
      decoration: BoxDecoration(
        color: Colors.red,
        borderRadius: BorderRadius.circular(150),
        image: DecorationImage(
          image: NetworkImage('https://p9-passport.byteacctimg.com/img/user-avatar/c21cdb224f42c072c2bb55075c9adf8d~300x300.image'),
          fit: BoxFit.cover
        )
      ),
    );
  }
}

方法2: 通过ClipOval容器实现

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      // width: 300,
      // height: 300,
      child: ClipOval(
        child: Image.network(
          'https://p9-passport.byteacctimg.com/img/user-avatar/c21cdb224f42c072c2bb55075c9adf8d~300x300.image',
          width: 300,
          height: 300,
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}

上面这两种方法我们都可以得到同样的效果

image.png

Image.asset

使用本地图片稍稍有点麻烦\

  • step one 在项目的根目录下创建images文件夹,同时在这个文件内创建3.0x2.0x两个文件夹,再将需要展示的图片复制到images文件夹内,这里的3.0x和2.0x文件夹是用来存储对应不同dpi的图片的,flutter可以自行根据手机设备的dpi获取来设置不同比例下的同一张图片。
  • step two 有了图片资源后,我们还需要在pubspec.yaml文件内声明我们要用到的图片资源,形如下图这样即可

image.png
当然了一个个写比较麻烦,你也可以直接声明images/这个文件夹就可以了

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      width: 300,
      height: 300,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(150),
        image: DecorationImage(
          image: AssetImage('images/1.png'),
          fit: BoxFit.cover
        )
      ),
    );
  }
}

再来通过本地图片实现一次圆形图片,得到如下的效果

image.png

ending

持续学习,加油,如有不对的地方还请指正,谢谢~~