颤振网络图像动态高度

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