4. ListView组件

2021-10-21  本文已影响0人  努力生活的西鱼
  • ListView的构造函数需要一次创建所有的项目,这种方式适合于小列表
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "ListView Widget",
      home: Scaffold(
        body:ListView(
          scrollDirection: Axis.horizontal, // 横向的列表
          children: [
            Image.network("https://newimg.jspang.com/Docker_logo_new_old.jpg"),
            Image.network("https://newimg.jspang.com/20gelunzi.jpg"),
            Image.network("https://newimg.jspang.com/BBD76.jpg")
          ],
        )
      ),
    );
  }
  • 为了处理包含大量数据的列表,最好使用ListView.builder,在列表项滚动到屏幕上创建该列表项
void main() {
  runApp(MyApp(
    items: List<String>.generate(1000, (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: "ListView Widget",
      home: Scaffold(
        body:
            ListView.builder(
                itemCount: items.length,
                itemBuilder: (context,index) {
                  return ListTile(
                    title: Text(
                      items[index],
                      style: const TextStyle(
                        color: Colors.lightBlue,
                        fontSize: 20.0
                      ),
                    ),
                  );
                }
            ),
      ),
    );
  }
}
上一篇下一篇

猜你喜欢

热点阅读