#dart #flutter #background-image #networkimageview
#дротик #трепетание #фоновое изображение #networkimageview
Вопрос:
Я использую NetworkImage для загрузки URL-адреса изображения в виде списка в качестве фонового изображения, как показано ниже,
child:new Card(child:new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: NetworkImage(data[index]["image"]),)
),),),
Приведенный выше код показывает представление списка с пустыми картами без высоты. но он отлично работает, когда я устанавливаю статическую высоту на container.as ниже
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 amp;amp; internet){
this.getData();
}else{
CommonWidget().showAlertDialog(context, "No Internet", "Please Connect to Internet");
}
});
}
}
Комментарии:
1. Можете ли вы опубликовать свой полный код в виде списка
2. Отредактировал мой пост, пожалуйста, проверьте @MangaldeepPannu
3. Отредактированный мой ответ, пожалуйста, проверьте.
4. Сработал ли мой ответ на вас?
Ответ №1:
Ошибка, которую вы совершаете, заключается в том, что вы хотите показать полное изображение, но устанавливаете его в качестве фона
Очевидно, что контейнер установит свою высоту так, чтобы она содержала его дочерний элемент, а не его фон
Если вы хотите показать полное изображение, вы должны установить его в качестве дочернего контейнера, тогда он будет масштабироваться height
для включения image