Flutter 图片组件
首页> 学海无涯> Web前端> Flutter 图片组件
Flutter 图片组件
摘要 Flutter 图片组件
一、Flutter 图片组件

图片组件是显示图像的组件,Image 组件有很多构造函数,这里我们只给大家讲两个
Image.asset, 本地图片
Image.network 远程图片

Image 组件的常用属性:

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



import 'package:flutter/material.dart';

class Custom_Image extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
appBar: AppBar(title: Text("flutter demo")), body: HomeContent())); }
} class HomeContent extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return Center( child: Container( child: Image.network( "/fileUpload/98036fd5-fb4b-4c81-a872-0a8c9bb9c65a.jpg",
alignment: Alignment.topLeft, color: Colors.red, colorBlendMode: BlendMode.colorDodge, // repeat: ImageRepeat.repeatX, fit: BoxFit.cover, ), width: 300.0, height: 400.0, decoration: BoxDecoration(color: Colors.yellow), ), ); } }


如果现实不了图片可以在 android\app\src\main\AndroidManifest.xml 添加

    <uses-permission android:name="android.permission.READ_PHONE_STATE" /> 
    <uses-permission android:name="android.permission.INTERNET" /> 
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />




二、Flutter 引入本地图片

 


然后,打开 pubspec.yaml 声明一下添加的图片文件,注意要配置对

 


最后,在代码中就可以用了

child: Container(
        child: Image.asset("images/a.jpeg", fit: BoxFit.cover),
        width: 300.0,
        height: 300.0,
        decoration: BoxDecoration(color: Colors.yellow),
      ),


三、Flutter 实现圆角以及实现圆形图片

实现圆角图片 

return Center(
      child: Container(
        width: 300.0,
        height: 300.0,
        decoration: BoxDecoration(
            color: Colors.yellow,
            borderRadius: BorderRadius.circular(150),
            image: DecorationImage(
                image: new NetworkImage(
                    '/fileUpload/98036fd5-fb4b-4c81-a872-0a8c9bb9c65a.jpg'),
fit: BoxFit.cover)), ), );


实现圆形图片

return Center(
      child: Container(
          child: ClipOval(
        child: Image.network(
          "https://www.itying.com/images/201905/ thumb_img/1101_thumb_G_1557845381862.jpg",
          width: 150.0,
          height: 150.0,
        ),
      )),
    );


四、Vscode 调试 Flutter 项目
1Vscode 中打开 flutter 项目进行开发
2、运行 Flutter 项目
flutter run
r :点击后热加载,也就算是重新加载吧。
p :显示网格,这个可以很好的掌握布局情况,工作中很有用。
o :切换 android ios 的预览模式。
q :退出调试预览模式。
3Vscode 默认连不上第三方模拟器解决方案
cd 到对应夜神模拟器 D:\Program Files\Nox\bin 目录 然后运行
nox_adb.exe connect 127.0.0.1:62001


版权声明:本文由Contione原创出品,转载请注明出处!

本文链接:https://contione.cn/article/detail/12

本文配乐
来说两句吧

暂无评论,大侠不妨来一发?