Flutter列表 Flutter列表|Flutter

本文概述

基本清单
使用长列表
创建网格列表
创建一个水平列表

列表是每个Web或移动应用程序中最受欢迎的元素。它们由多行项目组成, 其中包括文本, 按钮, 切换按钮, 图标, 缩略图等等。我们可以使用它来显示各种信息, 例如菜单, 选项卡, 或打破纯文本文件的单调性。
在本节中, 我们将学习如何在Flutter中使用列表。 Flutter允许你以不同的方式使用列表, 如下所示：

基本清单
长名单
网格列表
水平清单

让我们一一查看上述所有列表。
基本清单 【Flutter列表】Flutter包括用于处理列表的ListView小部件, 这是在移动应用程序中显示数据的基本概念。 ListView是显示仅包含少量项目的列表的理想标准。 ListView还包括ListTitle小部件, 该小部件为数据列表的视觉结构提供更多属性。
以下示例在Flutter应用程序中显示一个基本列表。

import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {final appTitle = 'Flutter Basic List Demo'; return MaterialApp(title: appTitle, home: Scaffold(appBar: AppBar(title: Text(appTitle), ), body: ListView(children: < Widget> [ListTile(leading: Icon(Icons.map), title: Text('Map'), ), ListTile(leading: Icon(Icons.photo_album), title: Text('Album'), ), ListTile(leading: Icon(Icons.phone), title: Text('Phone'), ), ListTile(leading: Icon(Icons.contacts), title: Text('Contact'), ), ListTile(leading: Icon(Icons.settings), title: Text('Setting'), ), ], ), ), ); }}

输出量
现在, 在Android Studio中运行该应用程序。你可以在仿真器或连接的设备中看到以下屏幕。

文章图片
使用长列表有时你希望在应用程序的单个屏幕上显示一个很长的列表, 在这种情况下, 上述显示列表的方法并不完美。要使用包含大量项目的列表, 我们需要使用ListView.builder()构造函数。 ListView和ListView.builder之间的主要区别在于, ListView一次创建所有项, 而ListView.builder()构造函数在滚动到屏幕上时创建项。
让我们看下面的例子。打开main.dart文件并替换以下代码。

import 'package:flutter/material.dart'; void main() {runApp(MyApp(products: List< String> .generate(500, (i) => "Product List: $i"), )); }class MyApp extends StatelessWidget {final List< String> products; MyApp({Key key, @required this.products}) : super(key: key); @overrideWidget build(BuildContext context) {final appTitle = 'Flutter Long List Demo'; return MaterialApp(title: appTitle, home: Scaffold(appBar: AppBar(title: Text(appTitle), ), body: ListView.builder(itemCount: products.length, itemBuilder: (context, index) {return ListTile(title: Text('${products[index]}'), ); }, ), ), ); }}

在上面的代码中, itemCount给出要在列表中显示的项目数。 itemBuilder告诉你要在何处返回要显示的项目。
输出量
现在, 在Android Studio中运行该应用程序。你将获得以下屏幕, 通过滚动到该屏幕可以查看所有产品列表。

文章图片
创建网格列表有时, 我们希望以网格布局显示项目, 而不是一个接一个的普通列表。 GridView小部件允许你在Flutter中创建网格列表。创建网格的最简单方法是使用GridView.count()构造函数, 该构造函数指定网格中的行数和列数。
让我们看下面的示例, 了解GridView如何在Flutter中工作以创建网格列表。打开main.dart文件, 然后插入以下代码。

import 'package:flutter/material.dart'; void main() {runApp(MyApp()); }class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {final appTitle = "Flutter Grid List Demo"; return MaterialApp(title: appTitle, home: Scaffold(appBar: AppBar(title: Text(appTitle), ), body: GridView.count(crossAxisCount: 3, children: List.generate(choices.length, (index) {return Center(child: SelectCard(choice: choices[index]), ); })))); }}class Choice {const Choice({this.title, this.icon}); final String title; final IconData icon; }const List< Choice> choices = const < Choice> [const Choice(title: 'Home', icon: Icons.home), const Choice(title: 'Contact', icon: Icons.contacts), const Choice(title: 'Map', icon: Icons.map), const Choice(title: 'Phone', icon: Icons.phone), const Choice(title: 'Camera', icon: Icons.camera_alt), const Choice(title: 'Setting', icon: Icons.settings), const Choice(title: 'Album', icon: Icons.photo_album), const Choice(title: 'WiFi', icon: Icons.wifi), const Choice(title: 'GPS', icon: Icons.gps_fixed), ]; class SelectCard extends StatelessWidget {const SelectCard({Key key, this.choice}) : super(key: key); final Choice choice; @overrideWidget build(BuildContext context) {final TextStyle textStyle = Theme.of(context).textTheme.display1; return Card(color: Colors.lightGreenAccent, child: Center(child: Column(mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.center, children: < Widget> [Expanded(child: Icon(choice.icon, size:50.0, color: textStyle.color)), Text(choice.title, style: textStyle), ]), )); }}

输出量
现在, 在Android Studio中运行该应用程序。你可以在Android模拟器中看到以下屏幕。

文章图片
创建一个水平列表 ListView小部件还支持水平列表。有时我们想要创建一个可以水平滚动而不是垂直滚动的列表。在这种情况下, ListView提供了覆盖垂直方向的水平scrollDirection。以下示例对其进行了更清晰的说明。打开main.dart文件并替换以下代码。

import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {final title = 'Flutter Horizontal Demo List'; return MaterialApp(title: title, home: Scaffold(appBar: AppBar(title: Text(title), ), body: Container(margin: EdgeInsets.symmetric(vertical: 25.0), height: 150.0, child: ListView(scrollDirection: Axis.horizontal, children: < Widget> [Container(width: 150.0, color: Colors.blue, child: new Stack(children: < Widget> [ListTile(leading: Icon(Icons.home), title: Text('Home'), ), ], ), ), Container(width: 148.0, color: Colors.green, child: new Stack(children: < Widget> [ListTile(leading: Icon(Icons.camera_alt), title: Text('Camera'), ), ], ), ), Container(width: 148.0, color: Colors.yellow, child: new Stack(children: < Widget> [ListTile(leading: Icon(Icons.phone), title: Text('Phone'), ), ], ), ), Container(width: 148.0, color: Colors.red, child: new Stack(children: < Widget> [ListTile(leading: Icon(Icons.map), title: Text('Map'), ), ], ), ), Container(width: 148.0, color: Colors.orange, child: new Stack(children: < Widget> [ListTile(leading: Icon(Icons.settings), title: Text('Setting'), ), ], ), ), ], ), ), ), ); }}

输出量
现在, 在Android Studio中运行该应用程序。它将显示以下屏幕, 你可以在其中水平滚动以查看所有列表。