[英]Flutter using ListView.builder
如何使用如下模型和數據應用列表視圖構建器來實現屏幕截圖中的布局:
模型
class Location {
String name;
String imagePath;
String summary;
Location(this.name, this.imagePath, this.summary);
}
數據
import 'package:app_data_model/model/location.dart';
var locationData = [
Location(
'Statue of Liberty',
'assets/images/new-york-city-statue-of-liberty.jpg',
'The Statue of Liberty was France\'s gift to America. Built in 1886, it remains a famous world symbol of freedom and one of the greatest American icons. '),
Location(
'Central Park',
'assets/images/new-york-city-central-park-lake-bridge-boats.jpg',
'A walk, peddle, or carriage ride through the crisscrossing pathways of Central Park is a must-do on anyone\'s New York City itinerary. '),
Location(
'Empire State Building',
'assets/images/new-york-city-empire-state-building.jpg',
'The Empire State Building is one of New York\'s most famous landmark buildings and key tourist attractions. The 381-meter-tall, 102-storey building was the tallest in the world until the 1 World Trade Center tower rose higher, 41 years later. ')
];
根據您的需要添加了一個演示:
class StackOver extends StatelessWidget {
var locationData = [
Location(
'Statue of Liberty',
'assets/images/new-york-city-statue-of-liberty.jpg',
'The Statue of Liberty was France\'s gift to America. Built in 1886, it remains a famous world symbol of freedom and one of the greatest American icons. '),
Location(
'Central Park',
'assets/images/new-york-city-central-park-lake-bridge-boats.jpg',
'A walk, peddle, or carriage ride through the crisscrossing pathways of Central Park is a must-do on anyone\'s New York City itinerary. '),
Location(
'Empire State Building',
'assets/images/new-york-city-empire-state-building.jpg',
'The Empire State Building is one of New York\'s most famous landmark buildings and key tourist attractions. The 381-meter-tall, 102-storey building was the tallest in the world until the 1 World Trade Center tower rose higher, 41 years later. ')
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Solve Before Downvote !'),
),
body: ListView.builder(
// give the listview a length based on your location data
itemCount: locationData.length,
itemBuilder: (context, index) {
// return a custom widget based on your preference
return ListTile(
// access the imagePath of your [locationData] using the index provided by the itembuilder
leading: Image.asset(
locationData[index].imagePath,
),
// access the name of your [locationData] using the index provided by the itembuilder
title: Text(
locationData[index].name,
),
);
},
),
);
}
}
結果:
ListView.builder(itemCount: locationData.length, (BuildContext context,index)=>ListTile(leading: Image.network(locationData[index].image),title :Text(locationData[index].locationName);)
檢查位置模型以獲得正確的屬性
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.