dart - Flutter NetworkImage 动态高度

Question

我正在使用 NetworkImage 在 ListView 中加载图像 Url 作为背景图像，如下所示，

child:new Card(child:new Container(

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

          ),),),

上面的代码显示了带有没有高度的空卡片的 ListView 。但是当我将静态高度设置为容器时它工作正常。如下

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

你一直在犯的错误是你想显示完整的图像，但你将其设置为背景

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

如果你想显示完整的图像，那么你应该将它设置为container's child 然后它会缩放它的height以包含image