Flutter 獲取圖片像素?cái)?shù)據(jù)（rgba）

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

// 以本地圖片為例：
List RGBAList;
// 1. 獲取 ImageProvider: 通過(guò) `ExactAssetImage('$local_img_uri')` 獲取 ExactAssetImage 對(duì)象
//    ExactAssetImage 繼承 AssetBundleImageProvider 繼承 ImageProvider
ExactAssetImage provider = ExactAssetImage('$local_img_uri');

// 2. 通過(guò) ImageProvider 獲取 ui.Image 對(duì)象
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. 通過(guò) ui.Image 對(duì)象獲得 rgba 像素?cái)?shù)據(jù)
completer.then((ui.Image image) {
    image.toByteData(format: ui.ImageByteFormat.rowRgba).then((ByteData data) {
        RGBAList = data.buffer.asUint8List().toList();
    }); 
})

quick app flex basis 測(cè)試 & 根節(jié)點(diǎn)最小高度不生效

<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 根節(jié)點(diǎn)最小高度不生效

<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>