美文网首页Flutter圈子Flutter中文社区Flutter
Flutter学习笔记七——ListView Widget 动态

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

作者: Love零O | 来源:发表于2019-03-26 09:44 被阅读18次

使用动态生成的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]}"),
                );
              }),
        ));
  }
}

效果如图:


list.jpg

相关文章

网友评论

    本文标题:Flutter学习笔记七——ListView Widget 动态

    本文链接:https://www.haomeiwen.com/subject/vysbvqtx.html