Flutter中ListView 动态数据生成列表

越陌度阡

发布于 2022-05-06 14:55:50

1.6K0

发布于 2022-05-06 14:55:50

1. 循环数据，生成列表效果。

import 'package:flutter/material.dart';

void main(){
    runApp(MyApp());
}

// 抽离成一个单独的组件
class MyApp extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                // 导航条
                appBar:AppBar(title:Text('Flutter App')),
                // 主体
                body:HomeContent(),
            ),
            theme: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}

// 循环动态生成的数据，生成列表
class HomeContent extends StatelessWidget{
    // 私有方法
    List<Widget> _getData(){
        List<Widget> list = new List();
        for(int i =0;i<20;i++){
            list.add(ListTile(
                title:Text("我是$i列表")
            ));
        }
        return list;  
    }
    @override
    Widget build(BuildContext context) {
        return ListView(
            children:this._getData()
        ); 
    }
}

效果图如下：

2. 循环本地模拟数据，生成列表效果。

新建一个文件，放置本地模拟数据。

// lib/res/listData.dart

List listData = [
    {
        "title": 'Candy Shop',
        "author": 'Mohamed Chahin',
        "imageUrl": 'https://www.itying.com/images/flutter/1.png',
    },
    {
        "title": 'Childhood in a picture',
        "author": 'Google',
        "imageUrl": 'https://www.itying.com/images/flutter/2.png',
    },
    {
        "title": 'Alibaba Shop',
        "author": 'Alibaba',
        "imageUrl": 'https://www.itying.com/images/flutter/3.png',
    },
    {
        "title": 'Candy Shop',
        "author": 'Mohamed Chahin',
        "imageUrl": 'https://www.itying.com/images/flutter/4.png',
    },
    {
        "title": 'Tornado',
        "author": 'Mohamed Chahin',
        "imageUrl": 'https://www.itying.com/images/flutter/5.png',
    },
    {
        "title": 'Undo',
        "author": 'Mohamed Chahin',
        "imageUrl": 'https://www.itying.com/images/flutter/6.png',
    },
    {
        "title": 'white-dragon',
        "author": 'Mohamed Chahin',
        "imageUrl": 'https://www.itying.com/images/flutter/7.png',
    }
];

导入本地模拟的数据，循环生成列表。

import 'package:flutter/material.dart';
import 'package:my_app/res/listData.dart';

void main(){
    runApp(MyApp());
}

// 抽离成一个单独的组件
class MyApp extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                // 导航条
                appBar:AppBar(title:Text('Flutter App')),
                // 主体
                body:HomeContent(),
            ),
            theme: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}

// 导入本地模拟的数据，循环生成列表
class HomeContent extends StatelessWidget{
    // 获取列表的私有方法
    List<Widget> _getData(){
        var list = listData.map((obj){
            return ListTile(
                leading: Image.network(obj["imageUrl"]),
                title:Text(obj["title"]),
                subtitle: Text(obj["author"])
            );
        });
        return list.toList();
    }
    @override
    Widget build(BuildContext context) {
        return ListView(
            children:this._getData()
        ); 
    }
}

效果图如下：

3. 用flutter的builder方法生成列表。

import 'package:flutter/material.dart';
import 'package:my_app/res/listData.dart';

void main(){
    runApp(MyApp());
}

// 抽离成一个单独的组件
class MyApp extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                // 导航条
                appBar:AppBar(title:Text('Flutter App')),
                // 主体
                body:HomeContent(),
            ),
            theme: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}


// 用flutter的builder方法生成列表
class HomeContent extends StatelessWidget{
    Widget _getListData(context,index){
        return ListTile(
            title:Text(listData[index]["title"]),
            leading: Image.network(listData[index]['imageUrl']),
            subtitle: Text(listData[index]["author"]),
        );
    }
    @override
    Widget build(BuildContext context) {
        // 列表构造器
        return ListView.builder(
            // 列表数量
            itemCount:listData.length,
            // 遍历生成列表
            itemBuilder: this._getListData
        );
    }
}

效果图如下：