如何使用以下模型和数据应用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,
),
);
},
),
);
}
}
结果:关于flutter - 使用ListView.builder flutter ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63950986/