我是flutter的新手，我目前正在開發一個flutter應用程式，從'https://private-anon-b242a842d4-carsapi1.apiary-mock.com/manufacturers'獲取資料。我正在顯示上述JSON檔案中的影像和名稱。有些影像的URL沒有影像。我怎樣才能從我的assets檔案夾中顯示圖片，除了JSON檔案中不可用的圖片？
主頁--我在這里顯示圖片和名稱的串列
。 Future<List<Car>> fetchCar() async {
carList = [];
final response = await http.get(Uri.parse(
'https://private-anon-b242a842d4-carsapi1.apiary-mock.com/manufacturers'））。)
if (response.statusCode == 200) {
List<dynamic> values = [] 。
values = json.decode(response.body);
if (values.length > 0) {
for (int i = 0; i < values.length; i ) {
if (values[i] != null) {
Map<String, dynamic> map = values[i] 。
carList.add(Car.fromJson(map))。
}
}
setState(() {
carList;
});
}
return carList;
}else {
throw Exception('Failed to load cars') 。
}
}
@override; }
void initState() {
fetchCar()。
Timer.periodic(Duration(seconds: 10), (Timer) => fetchCar())。
super.initState（）。
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView.builder(
scrollDirection: Axis.vertical,
itemCount: carList.length,
itemBuilder: (context, index) {
return GestureDetector(
onTap: (){
Navigator.of(context).push(MaterialPageRoute(builder: (_)=>DetailsPAge(
name: carList[index].name,
img_url: carList[index].img_url,
avg_price: carList[index].avg_price,
num_models:carList[index].num_models,
max_car_id: carList[index].max_car_id。
avg_horsepower: carList[index].avg_horsepower,
)),);
},
孩子。車卡(
name: carList[index].name,
img_url: carList[index].img_url
),
);
},
));
}
}
class Car{
汽車({
required this.name,
required this.id。
required this.img_url,
required this.max_car_id。
required this.num_models,
required this.avg_price,
required this.avg_horsepower
});
String name;
int id;
String img_url;
int max_car_id。
int num_models;
double avg_horsepower;
double avg_price;
factory Car.fromJson(Map<String, dynamic> json) {
return Car(
name: json['name']。
id: json['id']。
img_url: json['img_url']。
max_car_id: json['max_car_id']。
num_models:json['num_models']。
avg_price: json['avg_price']。
avg_horsepower: json['avg_horsepower']
);
}
}
List<Car> carList = [];
汽車卡部件--我在這里自定義圖片和文本
class CarCard extends StatelessWidget {
CarCard({
required this.name,
required this.img_url,
});
String name;
String img_url;
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only（top: 15, left: 10, right: 10）。)
孩子。 容器(
高度。100,
裝飾。BoxDecoration(
color: Colors.gray[300] 。
borderRadius: borderRadius.round(20)。
boxShadow: [
BoxShadow(
color: Colors.gray,
offset: Offset（4, 4）。
blurRadius: 10。
spreadRadius: 1。
),
BoxShadow(
color: Colors.white,
offset: Offset(-4, -4) 。
blurRadius: 10。
spreadRadius: 1,
),
],
),
孩子。行(
子女。[
Padding(
padding: const EdgeInsets.all(15.0) 。
孩子。容器(
裝飾。BoxDecoration(
color: Colors.gray[300] 。
borderRadius: borderRadius.round(20)。
boxShadow: [
BoxShadow(
color: Colors.gray,
offset: Offset（4, 4）。
blurRadius: 10。
spreadRadius: 1。
),
BoxShadow(
color: Colors.white,
offset: Offset(-4, -4) 。
blurRadius: 10。
spreadRadius: 1,
),
],
),
高度。60,
width: 60,
孩子。填充(
padding: const EdgeInsets.all（10.0）。
孩子。Image.network(img_url),
),
),
),
擴展的(
孩子。容器(
child: 列(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
兒童。[
FittedBox(
適合。BoxFit.scaleDown,
孩子。文本(
name,
風格。TextStyle(
color: Colors.gray[900] 。
字體大小。25。
fontWeight: FontWeight.bold,
),
),
),
],
),
),
),
],
),
),
);
}
}
uj5u.com熱心網友回復：
就我對你的問題的理解，你想從你的資產中顯示一張圖片，如果json中沒有圖片。
如果這是你想要做的，那么你可以使用??運算子，來檢查json中是否有影像，比如：
Navigator.of(context).push(MaterialPageRoute(builder: (_)=>DetailsPAge(
name: carList[index].name,
img_url: carList[index].img_url ? Image.assets("<您的資產圖片路徑>")。
avg_price:carList[index].avg_price。
num_models:carList[index].num_models,
max_car_id: carList[index].max_car_id。
avg_horsepower: carList[index].avg_horsepower,
)),);
你可以在你想要的任何地方添加這個圖片。
也不要把你所有的代碼都放進去，實際上沒有人會去閱讀和理解所有的代碼；只添加導致錯誤的代碼。
uj5u.com熱心網友回復：
如果圖片不在json鏈接中，那么你可以先檢查一下，然后從本地資產中顯示，讓我們試試吧
child: Padding(
padding: const EdgeInsets.all(10.0) 。
child: img_url! =null && img_url.isNotEmpty
? Image.network(img_url)
: Icon(Icons.add)。
),
你可以用
代替圖示。Align(
對齊。Alignment.center,
孩子。Image.asset('images/ic_alert_triangle.png') 。
),
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/322792.html
標籤：