Flutter学习笔记七——ListView Widget 动态列表

使用动态生成的List填充列表

首先在MyAPP类里定义一个list变量,并生成构造函数
final List<String> items;
const MyApp({Key key, @required this.items}) : super(key: key);
我使用的是android studio,构造函数是根据提示自动生成的。@required是自己添加的,表示必传。:super如果父类没有无名无参数的默认构造函数,则子类必须手动调用一个父类构造函数。
然后在runApp();里调用MyAPP()的地方传入一个list集合。这里使用List的generate方法生成。
void main() => runApp(MyApp(items: List<String>.generate(100, (index) => "Item$index")));

动态列表 ListView.builder()

使用传入的items集合填充ListView Widget。完整代码如下:

import 'package:flutter/material.dart';

void main() =>
    runApp(MyApp(items: List<String>.generate(100, (index) => "Item$index")));

class MyApp extends StatelessWidget {
  final List<String> items;

  const MyApp({Key key, @required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Hello Flutter',
        home: Scaffold(
          appBar: AppBar(
            title: Text("ListView Widget"),
            backgroundColor: Colors.indigoAccent,
            //标题居中
            centerTitle: true,
          ),
          body: ListView.builder(
              itemCount: items.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text("${items[index]}"),
                );
              }),
        ));
  }
}

效果如图:

《Flutter学习笔记七——ListView Widget 动态列表》 list.jpg

    原文作者:Love零O
    原文地址: https://www.jianshu.com/p/49a1452b10a9
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞