使用ListView.builder颤振

时间:2020-09-18 07:17:50

标签: flutter dart

如何使用以下模型和数据应用listview构建器以实现屏幕截图中的布局:

enter image description here

模型

-std=c++14

数据

cl

2 个答案:

答案 0 :(得分:2)

根据您的需要添加了一个演示:


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,
            ),
          );
        },
      ),
    );
  }
}

结果:

result

答案 1 :(得分:1)

ListView.builder(itemCount:locationData.length, (BuildContext上下文,索引)=> ListTile(导致: Image.network(locationData [index] .image),title:Text(locationData [index] .locationName);)

检查位置模型以获取正确的属性