美文网首页
flutter:Image组件的基本用法以及报错问题解决办法

flutter:Image组件的基本用法以及报错问题解决办法

作者: xing_x | 来源:发表于2023-05-30 10:08 被阅读0次
先上代码
import 'package:flutter/material.dart';
import '../param/config.dart';
import 'dart:ui';
import 'package:device_info/device_info.dart';

class MineInfoWidget extends StatefulWidget {
  /// 组件属性必须使用 final 修饰
  ///   所有的 Widget 组件都是不可变的
  // final String name;
  // final int? age;
  const MineInfoWidget({super.key});

  @override
  State<MineInfoWidget> createState() => _MineInfoWidgetState();
}

class _MineInfoWidgetState extends State<MineInfoWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(padValue),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image(
                image: const NetworkImage(infoUlrStr),
                alignment: Alignment.center,
                repeat: ImageRepeat.noRepeat,
                // height: 200.0,
                width: MediaQuery.of(context).size.width - padValue * 2,
              )
            ],
          )
        ],
      ),
    );
  }
}
这是定义的两个固定参数
const infoUlrStr = 'https://lmg.jj20.com/up/allimg/tp09/210H51R3313N3-0-lp.jpg';

const padValue = 15.0;

在使用networkImages的时候报错:
message:"Invalid image data"
hashCode:639365751
会在系系统库的捕获异常的地方报错,闪退,这是因为你引用的图片url不对,你选择图片的时候不要用浏览器的地址,而要选择复制图片的链接地址,这样就不会有这个报错了。
错误示例:https://cn.bing.com/images/search?view=detailV2&ccid=30Ri%2br8Y&id=C0236D1687AEAF3B089855C2315AD6D8AF6F7316&thid=OIP.30Ri-r8Y7dBxlWeaX4o35QHaE2&mediaurl=https%3a%2f%2fts1.cn.mm.bing.net%2fth%2fid%2fR-C.df4462fabf18edd07195679a5f8a37e5%3frik%3dFnNvr9jWWjHCVQ%26riu%3dhttp%253a%252f%252fseopic.699pic.com%252fphoto%252f50059%252f8720.jpg_wh1200.jpg%26ehk%3dofb4q76uCls2S07aIlc8%252bab3H5zwrmj%252bhqiZ%252fyw3Ghw%253d%26risl%3d%26pid%3dImgRaw%26r%3d0&exph=787&expw=1200&q=%e5%9b%be%e7%89%87&simid=608019296324252783&FORM=IRPRST&ck=43E5DD20653A1F45D88C4702230907C8&selectedIndex=1&ajaxhist=0&ajaxserp=0

使用方法:

我们要把照片平铺在页面上,并且宽度等于屏幕的宽度,那我们就需要引入device_info这个库。

device_info: ^2.0.3
宽高的计算方法
float screen_width = MediaQuery.of(context).size.width
float screen_height = MediaQuery.of(context).size.height

其他的方法你们都会用,不再细说。

相关文章

网友评论

      本文标题:flutter:Image组件的基本用法以及报错问题解决办法

      本文链接:https://www.haomeiwen.com/subject/nqwsedtx.html