我正在使用 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");
}
});
}
}最佳答案
你一直在犯的错误是你想显示完整的图像，但你将其设置为背景
很明显，容器会将其高度设置为包含其子而不包含其背景
如果你想显示完整的图像，那么你应该将它设置为container's child 然后它会缩放它的height以包含image
关于dart - Flutter NetworkImage 动态高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55774370/