Flutter——ListView组件（平铺列表组件）
2024-08-28 08:18:16
ListView的常见参数:
| 名称 | 类型 | 说明 |
|
scrollDirection
|
Axis
|
Axis.horizontal 水平列表
Axis.vertical 垂直列表
|
|
padding
|
EdgeInsetsGeometry
|
内边距
|
|
resolve
|
bool
|
组件反向排序
|
|
children
|
List<Widget>
|
列表元素
|
垂直列表
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: "ListWidget",
home: MyApp(),
));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.directions_car),
title: Text("标题"),
subtitle: Text("内容"),
trailing: Icon(Icons.airplanemode_active),
),
ListTile(
leading: Icon(Icons.directions_car),
title: Text("标题"),
subtitle: Text("内容"),
trailing: Icon(Icons.airplanemode_active),
),
ListTile(
leading: Icon(Icons.directions_car),
title: Text("标题"),
subtitle: Text("内容"),
trailing: Icon(Icons.airplanemode_active),
),
],
),
);
}
}
水平列表
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: "ListWidget",
home: MyApp(),
));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
color: Colors.pink,
width: 100.0,
height: 100.0,
),
Container(
color: Colors.yellow,
width: 100.0,
height: 100.0,
),
Container(
color: Colors.blue,
width: 100.0,
height: 100.0,
),
Container(
color: Colors.green,
width: 100.0,
height: 100.0,
),
Container(
color: Colors.orange,
width: 100.0,
height: 100.0,
),
],
),
);
}
}
注意：如果是垂直列表，LIstView里面的widget设置的width属性失效。
如果是水平列表，ListView里面的widget设置的height属性失效。
动态列表
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: "ListWidget",
home: MyApp(),
));
}
class MyApp extends StatelessWidget {
List list = new List();
MyApp() {
for(var i = 0; i < 15; i++) {
this.list.add("我是第$i条数据");
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView.builder(
itemCount: this.list.length,
itemBuilder: (context,index) {
return ListTile(
leading: Icon(Icons.palette),
title: Text("${this.list[index]}"),
);
}
),
);
}
}
最新文章
- python之 sqlalchemy
- 注册noip.com动态域名的步骤
- wpf 自定义圆形按钮
- 让ASP.NET MVC不使用jsonp也可以跨域访问
- [JBoss] - 在Jboss 7.1 AS中打印hibernate的SQL方法
- iis7/7.5设置上传文件最大大小
- WEBUS2.0 In Action - [源代码] - C#代码搜索器
- leiningen安装记录
- C++ STL它vector详细解释
- Github上的600多个iOS开源类库
- leetcode — subsets
- Emacs Org-mode 1 下载、安装、基本使用
- FSPageContentView这个库需要修改源码才能用，否则有黑屏bug
- c# 类的历遍和历遍操作
- 如何查看安装python和numpy的版本
- mybatis xml中返回map 参看aiwanpai
- 洛谷 P2596 [ZJOI2006]书架 解题报告
- 为何float有效位数为7位？
- COBOL和C#比较
- Unity时钟定时器插件——Vision Timer源码分析之一