Question

在Flutter项目中，我有一个ListView.builder；在页面中列出视图卡，每个卡都有一个选项可以上传多个图像。在每张卡中，我只想添加（上传）不同的图像，并仅在该特定卡中（水平列表视图）显示它们。

所以我声明了一个列表来存储这些图像

 [
    {
        "lat": 53.1521596106757,
        "lon": -0.486577431632087,
        "size": 3598,
        "field": "TestField",
        "variety": "TestVariety",
        "count": 67
    },
    {
        "lat": 53.1521596106757,
        "lon": -0.486287281632087,
        "size": 4077,
        "field": "TestField",
        "variety": "TestVariety",
        "count": 73
    }
]

并称他们为

let testField = new google.maps.LatLng(53.1519, -0.4895);

const map = new google.maps.Map(d3.select('#map').node(), {
  zoom: 17,
  center: testField,
  mapTypeId: 'satellite',
  streetViewControl: false,
  mapTypeControl: false,
});

//colour scale
// const colorScale = d3.scaleSequential(d3.interpolateBlues);    

d3.json('/small_example.json')
  .then(data => {

    let countInfo = data.map(function (testVariety) {
      return testVariety.count;
    })

    // colorScale.domain(data.map(d => d.countInfo))

    //create overlay
    const overlay = new google.maps.OverlayView();

    // Add the container when the overlay is added to the map.
    overlay.onAdd = function () {
      const layer = d3.select(this.getPanes().overlayLayer).append('div')
        .attr('class', 'panes');

      // Draw each marker as a separate SVG element.
      overlay.draw = function () {
        const projection = this.getProjection(),
          padding = 10;

        const marker = layer.selectAll('svg')
          .data(d3.entries(data))
          .each(transform) // update existing markers
          .enter().append('svg')
          .each(transform)
          .attr('class', 'marker')

        //add a rect
        marker.append('rect')
          .attr('height', 15)
          .attr('width', 15)
        // .style('fill', d => colorScale(d.count));
        // .style('fill', function(d) {return d.count})

        let countInfo = data.map(function (testVariety) {
          return testVariety.count;
        })

        countInfo.forEach(element => {
          //add lable
          marker.append('text')
            .attr('x', padding + 7)
            .attr('y', padding)
            .attr('dy', '.31em')
            .each(transform)
            .text(function (d) {
              return element
            });
          console.log(element)
        });

        function transform(d) {
          d = new google.maps.LatLng(d.value.lat, d.value.lon);
          d = projection.fromLatLngToDivPixel(d);
          return d3.select(this)
            .style('left', (d.x - padding) + 'px')
            .style('top', (d.y - padding) + 'px')
        }
      };
    };

    // Bind overlay to the map
    overlay.setMap(map);
  });

在卡片中显示它们。

2

但是这些图像显示在每张卡中。但我只想显示从该特定卡中挑选的图像。

我该如何实现？

Flutter：分别在ListView.builder项目中显示图像列表

0 个答案: