暂存代码

Flutter 获取图片像素数据(rgba)

import 'dart:ui' as ui;
import 'package:flutter/material.dart';

// 以本地图片为例:
List RGBAList;
// 1. 获取 ImageProvider: 通过 `ExactAssetImage('$local_img_uri')` 获取 ExactAssetImage 对象
//    ExactAssetImage 继承 AssetBundleImageProvider 继承 ImageProvider
ExactAssetImage provider = ExactAssetImage('$local_img_uri');

// 2. 通过 ImageProvider 获取 ui.Image 对象
ImageStream stream = provider.resolve(ImageConfiguration.empty);
Completer completer = Completer<ui.Image>();
ImageStreamListener listener = ImageStreamListener((frame, sync) {
    ui.Image image = frame.image;
    completer.complete(image);
    stream.removeListener(listener);
})
stream.addListener(listener);

// 3. 通过 ui.Image 对象获得 rgba 像素数据
completer.then((ui.Image image) {
    image.toByteData(format: ui.ImageByteFormat.rowRgba).then((ByteData data) {
        RGBAList = data.buffer.asUint8List().toList();
    }); 
})

quick app flex basis 测试 & 根节点最小高度不生效

<template>
  <div class="common-style-visibility">
    <div class="item1 item"></div>>
    <div class="item2 item"></div>>
    <div class="item3 item"></div>>

  </div>
</template>

<script>
export default {}
</script>

<style>
.common-style-visibility {
  height: 200px;
  align-items: flex-start;
  flex-direction: column;
}
.item {
  height: 200px;
  width: 100%;
  border: 2px solid red;
}
.item1 {
  background-color: #33ccff;
  flex-basis: 30px;
}
.item2 {
  background-color: #33ccff;
  flex-basis: 80px;
}
.item3 {
  background-color: #33ccff;
  flex-basis: 100px;
}
</style>


quick app 根节点最小高度不生效

<template>
  <div class="common-style-margin">
    <div class="m-l-50 item">
    </div>
    <div class="m-t-50 item">
    </div>
    <div class="m-b-50 item">
    </div>
    <div class="margin-right-wrapper">
      <div class="m-r-50 item">
      </div>
      <div class="m-r-50 item">
      </div>
    </div>
  </div>
</template>
<script>
export default {
}
</script>
<style>
.common-style-margin {
  position: fixed;
  top: 50px;
  left: 50px;
  margin-left: 50px;
  margin-top: 50px;
  border: 4px solid #333;
  width: 600px;
  height: 50%;
  align-items: flex-start;
  flex-direction: column;
}

.m-l-50 {
  margin-left: 50px;
  background-color: #33ccff;
}

.m-t-50 {
  margin-top: 50px;
  background-color: #33ff99;
}

.m-r-50 {
  margin-right: 50px;
  background-color: #663399;
}

.m-b-50 {
  margin-bottom: 50px;
  background-color: #993333;
}

.item {
  width: 300px;
  height: 200px;
  align-items: flex-start;
}
</style>
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容