Flutter NetworkImage动态高度

Question

我正在使用NetworkImage将列表视图中的Image Url作为背景图像加载，如下所示，

child:new Card(child:new Container(

          decoration: new BoxDecoration(
              image: new DecorationImage(
                  image: NetworkImage(data[index]["image"]),)

          ),),),

以上代码显示列表视图，其中包含没有高度的空卡。但是当我将静态高度设置为容器时，效果很好。如下

new Container(

          height: 380,

          decoration: new BoxDecoration(
              image: new DecorationImage(
                  image: NetworkImage(data[index]["image"]),)

          ),

问题是我需要URL动态加载图像。无法使用Image.network小部件，因为我需要将图像作为背景。

完整代码：

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:connectivity/connectivity.dart';
import 'common_widgets.dart';
import 'MyColors.dart';


class ImageList extends StatefulWidget{

  @override
  _ImageListState createState() => new _ImageListState();

}

class _ImageListState extends State<ImageList>{

  String imageApiUrl = "my_url_to_get_posts";
  List data;
  bool is_connected;

  Future<bool> checkConnection() async{

    var conectionResult = await (Connectivity().checkConnectivity());

      if(conectionResult == ConnectivityResult.mobile){
        return true;
      }else if(conectionResult == ConnectivityResult.wifi){

        return true;
      }


      return false;

  }



  Future<String> getData() async{

    http.Response response = await http.get(
      Uri.encodeFull(imageApiUrl),
      headers: {

        "Accept": "application/json"

      }
    );

    setState(() {

      var rest = json.decode(response.body);

      data = rest["data"] as List;

    });



  }


  Future shareImage(String url) async{


  }
  
  Widget itemImage(BuildContext context, int index){
    
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 3),
      child: new Card(

        elevation: 1,

        child: new Container(

          child: Padding(
            padding: const EdgeInsets.all(5.0),
            child: new Container(

//              width: double.infinity,
              height: 380,

              decoration: new BoxDecoration(
                  image: new DecorationImage(
                      image: NetworkImage(data[index]["image"]),)

              ),
              
              child: new Align(

                alignment: Alignment.bottomRight,

                child: new GestureDetector(
                  child: new Container(
                    height: 45,
                    width: 45,
                    child: Icon(Icons.share, color: Colors.white, ),
                    decoration: new BoxDecoration(
                        shape: BoxShape.circle,
                        color: Color(MyColors().getColorFromHex("#40000000"))

                    ),


                  ),
                  onTap: (){

                    print("click");

                    shareImage("");

                  },

                ),
              )

            ),
          ),


        ),


      ),
    );
    
  }


  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(

      appBar: AppBar(
        backgroundColor: Colors.black,
        title: new Text("Quotes of the Day"),
        
      ),
      
      body: RefreshIndicator(

        onRefresh: getData,

        child: new ListView.builder(
          itemCount: data == null ? 0 : data.length,
          itemBuilder: itemImage,
        ),
      ),
      
    );


  }

  /**
   * On Page Layout load complete
   */
  @override
  void initState() {

    super.initState();

    this.checkConnection().then((internet){

      print("My"+ internet.toString());

      if(internet != null && internet){

        this.getData();

      }else{

        CommonWidget().showAlertDialog(context, "No Internet", "Please Connect to Internet");

      }

    });


  }


}

Answer 1

您一直在犯的错误是您要显示完整图片，但您将其设置为背景

很明显，容器将设置其高度以包含其子级，而不包含其背景

如果要显示完整图像，则应将其设置为容器的孩子，然后它将缩放其height以包括image