flutter 获取网络图片的尺寸

 获取网络图片的尺寸

import 'dart:async';

import 'package:flutter/widgets.dart';


/// Image Util.
class ImageUtil {
  late ImageStreamListener _listener;
  late ImageStream _imageStream;

  /// get image width height,load error throw exception.(unit px)
  /// 获取图片宽高,加载错误会抛出异常.(单位 px)
  /// image
  /// url network
  /// local url , package
  Future<Rect> getImageWH({
    Image? image,
    String? url,
    String? localUrl,
    String? package,
    ImageConfiguration? configuration,
  }) {
    Completer<Rect> completer = Completer<Rect>();
    _listener = ImageStreamListener(
      (ImageInfo info, bool synchronousCall) {
        _imageStream.removeListener(_listener);
        if (!completer.isCompleted) {
          completer.complete(Rect.fromLTWH(
              0, 0, info.image.width.toDouble(), info.image.height.toDouble()));
        }
      },
      onError: (dynamic exception, StackTrace? stackTrace) {
        _imageStream.removeListener(_listener);
        if (!completer.isCompleted) {
          completer.completeError(exception, stackTrace);
        }
      },
    );

    if (image == null &&
        (url == null || url.isEmpty) &&
        (localUrl == null || localUrl.isEmpty)) {
      return Future.value(Rect.zero);
    }
    Image? img = image;
    if (img == null) {
      img = (url != null && url.isNotEmpty)
          ? Image.network(url)
          : Image.asset(localUrl!, package: package);
    }
    _imageStream = img.image.resolve(configuration ?? ImageConfiguration());
    _imageStream.addListener(_listener);
    return completer.future;
  }
}

使用

Rect rect = await ImageUtil().getImageWH(url:"网络图片");

### 如何在 Flutter 中设置背景图片Flutter 中,可以通过 `Container` 或者 `DecoratedBox` 来设置背景图片。通常情况下,会使用 `DecorationImage` 配合 `BoxDecoration` 实现这一需求。下面提供一个完整的示例代码来展示如何在 Flutter 中设置背景图片。 #### 示例代码 以下是通过 `Container` 设置背景图片的一个简单例子: ```dart 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: Text('Background Image Example')), body: Center( child: MyBackgroundWidget(), ), ), ); } } class MyBackgroundWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Container( decoration: BoxDecoration( image: DecorationImage( image: AssetImage('images/background_image.jpg'), // 背景图片路径 fit: BoxFit.cover, // 图片填充方式 ), ), child: Center( child: Text( "This is a background image example.", style: TextStyle(fontSize: 20, color: Colors.white), ), ), ); } } ``` 在这个示例中,我们使用了 `AssetImage` 加载本地图片作为背景[^1]。需要注意的是,图片路径 `'images/background_image.jpg'` 必须存在于项目目录下的 `assets/images/` 文件夹中,并且需要在 `pubspec.yaml` 文件中声明该资源文件的位置。 #### 关键点解析 - **图片加载**:上述代码中的 `image: AssetImage('images/background_image.jpg')` 表明了如何加载本地图片资源。这与引用中提到的 `Image.asset` 类似,都需要确保图片已正确定义并放置于指定位置。 - **图片适配模式**:`fit: BoxFit.cover` 定义了图片如何适应容器尺寸。常见的选项有 `cover`, `contain`, 和 `fill` 等。 - **样式调整**:为了使文字更清晰可见,可以在文本样式中定义颜色为白色或其他对比明显的颜色。 #### 注意事项 如果希望动态加载网络图片,则可以替换 `AssetImage` 为 `NetworkImage`,如下所示: ```dart decoration: BoxDecoration( image: DecorationImage( image: NetworkImage('https://example.com/image.jpg'), fit: BoxFit.cover, ), ), ``` 这种做法适用于从远程服务器获取图片的情况。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

肥肥呀呀呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值