玖叶教程网

前端编程开发入门

Flutter 示例Demo(一)轻松构建一个基础列表

用列表展示数据是移动应用开发中较为常用的方式,Flutter 自带的 ListView widget 可以帮助你轻松的实现一个列表。

创建一个 ListView

使用标准的 ListView 构造方法非常适合只有少量数据的列表。我们还将使用内置的 ListTile widget 来给我们的条目提供可视化结构。

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'),
 ),
 ],
);

完整样例

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 final title = 'Basic List';
 return MaterialApp(
 title: title,
 home: Scaffold(
 appBar: AppBar(
 title: Text(title),
 ),
 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'),
 ),
 ],
 ),
 ),
 );
 }
}

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言