时间戳

首页 > 解决方案 > 从api获取图像以及如何在flutter中设置每个图像的动态高度？

image - 从api获取图像以及如何在flutter中设置每个图像的动态高度？

问题描述

我通过API从后端获取图像，但是flutter必须在容器中设置约束，但是图像高度不一样，我该怎么办？

颤振图像问题：

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:flutter_use_redux/component/pureProduct.dart';
import 'package:flutter_use_redux/models/product.dart';
import 'package:flutter_use_redux/reselect/reselectHome.dart';
import 'package:oktoast/oktoast.dart';

/// 首页轮播组件编写
class SwiperDiy extends StatelessWidget {
  final List swiperDataList;
  final String imageHost;
  final bool autoPlay;

  SwiperDiy({Key key, this.swiperDataList,this.imageHost,this.autoPlay}) : super(key: key);

  @override
  Widget build(BuildContext context) {
   Map swiperData= reselectSwiper(swiperDataList);
   List realSwiperData=swiperData['list'];
  
    return Container(
         constraints:
          BoxConstraints(
           maxHeight:550
         ),
        
        child:  Swiper(
      scrollDirection: Axis.horizontal,
      itemBuilder: (BuildContext context, int index) {
        Map product=realSwiperData[index];
        return InkWell(
    onTap: () {
      print('/collections/${product['link']}');
    },
    child: CachedNetworkImage(imageUrl:imageHost+product['href'],fit: BoxFit.fill,),);
      },
      itemCount: realSwiperData?.length,
      //pagination: new SwiperPagination(),
      autoplay: realSwiperData.length>1,
      viewportFraction:1,
      // 当前视窗展示比例 小于1可见上一个和下一个视窗
      scale: 1,
    ),
      );
  }
}

这是我的代码。但是 maxHeight 不适合我的想法：

在此处输入图像描述

比如图片来自网络，有时它的高度可能是 300，有时它的高度可能是 400，我只是想让 swiper 拉伸 Container。

标签： imagefluttercontainersswiper

解决方案

的使用height和 width构造函数Container

 Container(
         height: 200,
         width: 200,
          //  constraints:
          //   BoxConstraints(
          //    maxHeight:550
          //  ),
          
       child:  Swiper(
        scrollDirection: Axis.horizontal,
        itemBuilder: (BuildContext context, int index) {
          Map product=realSwiperData[index];
          return InkWell(
      onTap: () {
         print('/collections/${product['link']}');
      },
      child:  CachedNetworkImage(
            imageUrl:imageHost+product['href'],
           fit: BoxFit.fill,
           placeholder: (context, url) => Center(child: CircularProgressIndicator()),
            errorWidget: (context, url, error) => Center(child: Icon(Icons.error)),
          )
     
      );
        },
        itemCount:  realSwiperData?.length,
        //pagination: new SwiperPagination(),
        autoplay: realSwiperData.length>1,,
        viewportFraction:1,
        // 当前视窗展示比例 小于1可见上一个和下一个视窗
        scale: 1,
      ),
        ),

推荐阅读