Flutter的ListView（静态列表）
1.多文本情况
code
class vertical1 extends StatelessWidget {
const vertical1({super.key});
@override
Widget build(BuildContext context) {
return ListView(
children:const<Widget>[
ListTile(title: Text("Flutter 列表组件"),),
Divider(height: 10,),
ListTile(title: Text("Flutter 列表组件"),),
Divider(height: 10,),
ListTile(title: Text("Flutter 列表组件"),),
Divider(height: 10,),
ListTile(title: Text("Flutter 列表组件"),),
Divider(height: 10,),
ListTile(title: Text("Flutter 列表组件"),),
Divider(height: 10,),
ListTile(title: Text("Flutter 列表组件"),),
Divider(height: 10,),
ListTile(title: Text("Flutter 列表组件"),),
Divider(height: 10,),
ListTile(title: Text("Flutter 列表组件"),),
Divider(height: 10,),
ListTile(title: Text("Flutter 列表组件"),),
Divider(height: 10,),
ListTile(title: Text("Flutter 列表组件"),),
Divider(height: 10,),
ListTile(title: Text("Flutter 列表组件"),),
Divider(height: 10,),
ListTile(title: Text("Flutter 列表组件"),),
Divider(height: 10,),
],
);
}
}
在column下直接引入ListView会抛出异常报错，不显示内容，原因是主要是因为你试图将一个 ListView 直接放置在 Column 中，而没有给它一个明确的大小。
在Flutter中，ListView 是一个滚动组件，它需要知道自己的大小才能正确地滚动内容。当你把它放在 Column 中时，由于 Column 本身是试图让其子组件占用尽可能多的空间（在垂直方向上），这就导致了 ListView 没有一个明确的界限。由于 ListView 没有被分配具体的大小，它就无法被正确布局，从而导致了这个错误。
解决方法是为 ListView 提供一个明确的大小。这通常通过将 ListView 放在 Expanded 或 Flexible 组件中来实现，或者使用 SizedBox 来指定大小。这样，ListView 就有了一个明确的大小，并能够被正确地布局和渲染。
Scaffold(
appBar: AppBar(title: Text("垂直列表"),),
body: const Column(children: [
//只有文字
Expanded(child: vertical1()),
SizedBox(height: 20,),
）
2.Icon+Text
View Code
class vertical2 extends StatelessWidget {
const vertical2({super.key});
@override
Widget build(BuildContext context) {
return ListView(
children:const <Widget>[
ListTile(
leading: Icon(Icons.access_alarms),
title: Text("全部订单"),
),
ListTile(
leading: Icon(Icons.access_alarms),
title: Text("全部订单"),
),
ListTile(
leading: Icon(Icons.access_alarms),
title: Text("全部订单"),
),
ListTile(
leading: Icon(Icons.access_alarms),
title: Text("全部订单"),
),
ListTile(
leading: Icon(Icons.access_alarms),
title: Text("全部订单"),
),
ListTile(
leading: Icon(Icons.access_alarms),
title: Text("全部订单"),
),
ListTile(
leading: Icon(Icons.access_alarms),
title: Text("全部订单"),
),
ListTile(
leading: Icon(Icons.access_alarms),
title: Text("全部订单"),
),
ListTile(
leading: Icon(Icons.access_alarms),
title: Text("全部订单"),
),
ListTile(
leading: Icon(Icons.access_alarms),
title: Text("全部订单"),
),
ListTile(
leading: Icon(Icons.access_alarms),
title: Text("全部订单"),
),
ListTile(
leading: Icon(Icons.access_alarms),
title: Text("全部订单"),
),
],
);
}
}
3.Image+title+subtitle
code
class vertical3 extends StatelessWidget {
const vertical3({super.key});
@override
Widget build(BuildContext context) {
return ListView(
children: <Widget>[
ListTile(
leading: Image.network("https://img2024.cnblogs.com/blog/2666697/202403/2666697-20240308045510596-2026591545.png"),
title:const Text("FlutterFlutterFlutterFlutterFlutterFlutterFlutter"),
subtitle: const Text("datadatadatadatadatadatadatadatadatadata"),
),
ListTile(
leading: Image.network("https://img2024.cnblogs.com/blog/2666697/202403/2666697-20240308045525777-1050348584.png"),
title:const Text("FlutterFlutterFlutterFlutterFlutterFlutterFlutter"),
subtitle: const Text("datadatadatadatadatadatadatadatadatadata"),
),
ListTile(
leading: Image.network("https://img2024.cnblogs.com/blog/2666697/202403/2666697-20240308045510596-2026591545.png"),
title:const Text("FlutterFlutterFlutterFlutterFlutterFlutterFlutter"),
subtitle: const Text("datadatadatadatadatadatadatadatadatadata"),
),
ListTile(
leading: Image.network("https://img2024.cnblogs.com/blog/2666697/202403/2666697-20240308045525777-1050348584.png"),
title:const Text("FlutterFlutterFlutterFlutterFlutterFlutterFlutter"),
subtitle: const Text("datadatadatadatadatadatadatadatadatadata"),
),ListTile(
leading: Image.network("https://img2024.cnblogs.com/blog/2666697/202403/2666697-20240308045510596-2026591545.png"),
title:const Text("FlutterFlutterFlutterFlutterFlutterFlutterFlutter"),
subtitle: const Text("datadatadatadatadatadatadatadatadatadata"),
),
ListTile(
leading: Image.network("https://img2024.cnblogs.com/blog/2666697/202403/2666697-20240308045525777-1050348584.png"),
title:const Text("FlutterFlutterFlutterFlutterFlutterFlutterFlutter"),
subtitle: const Text("datadatadatadatadatadatadatadatadatadata"),
),
],
);
}
}
4.Image+Text
View Code
class vertical4 extends StatelessWidget {
const vertical4({super.key});
@override
Widget build(BuildContext context) {
return ListView(
padding: EdgeInsets.all(10),
children: [
Image.network("https://portal-oss.zhiye.com/606179/image/54446b87-fc31-46d6-8847-129206f3f56f.jpg"),
Container(
height: 40,
padding: EdgeInsets.fromLTRB(0, 5, 0, 5),
child:const Text("这是第一张图片",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
color: Colors.black87,
),
),
),
Image.network("https://portal-oss.zhiye.com/606179/image/54446b87-fc31-46d6-8847-129206f3f56f.jpg"),
Container(
height: 50,
padding: EdgeInsets.fromLTRB(0, 10, 0, 5),
child:const Text("这是第一张图片",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
color: Colors.black87,
),
),
),Image.network("https://portal-oss.zhiye.com/606179/image/54446b87-fc31-46d6-8847-129206f3f56f.jpg"),
Container(
height: 40,
padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
child:const Text("这是第一张图片",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
color: Colors.black87,
),
),
),Image.network("https://portal-oss.zhiye.com/606179/image/54446b87-fc31-46d6-8847-129206f3f56f.jpg"),
Container(
height: 40,
padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
child:const Text("这是第一张图片",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
color: Colors.black87,
),
),
),Image.network("https://portal-oss.zhiye.com/606179/image/54446b87-fc31-46d6-8847-129206f3f56f.jpg"),
Container(
height: 40,
padding: EdgeInsets.fromLTRB(0, 5, 0, 10),
child:const Text("这是第一张图片",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
color: Colors.black87,
),
),
),
],
);
}
}
5.水平列表
View Code
class vertical5 extends StatelessWidget {
const vertical5({super.key});
@override
Widget build(BuildContext context) {
return SizedBox(
height: 180,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
Container(
width: 180,
color: Colors.red,
),
Container(
width: 180,
color: Colors.yellow,
child: Column(
children: [
Image.network("https://img2024.cnblogs.com/blog/2666697/202403/2666697-20240308045525777-1050348584.png",
fit: BoxFit.cover,),
Text("这是一张图片"),
],
),
),
Container(
width: 180,
color: Colors.orange,
),
Container(
width: 180,
color: Colors.black,
),
],
),
);
}
}
所有代码：
//LsitView
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("垂直列表"),),
body: const Column(children: [
//只有文字
// Expanded(child: vertical1()),
// SizedBox(
// height: 200,
// width:200,
// child:vertical1()),
// SizedBox(
// height: 200,
// width:200,
// child:vertical2()),
// SizedBox(height: 20,),
// SizedBox(
// height: 500,
// width:500,
// child:vertical3()),
// SizedBox(height: 20,),
// SizedBox(
// height: 600,
// width:1000,
// child:vertical4()),
// SizedBox(height: 20,),
SizedBox(
height: 200,
width:500,
child:vertical5()),
SizedBox(height: 20,),
]),
),
);
}
}
class vertical1 extends StatelessWidget {
const vertical1({super.key});
@override
Widget build(BuildContext context) {
return ListView(
children:const<Widget>[
ListTile(title: Text("Flutter 列表组件"),),
Divider(height: 10,),
ListTile(title: Text("Flutter 列表组件"),),
Divider(height: 10,),
ListTile(title: Text("Flutter 列表组件"),),
Divider(height: 10,),
ListTile(title: Text("Flutter 列表组件"),),
Divider(height: 10,),
ListTile(title: Text("Flutter 列表组件"),),
Divider(height: 10,),
ListTile(title: Text("Flutter 列表组件"),),
Divider(height: 10,),
ListTile(title: Text("Flutter 列表组件"),),
Divider(height: 10,),
ListTile(title: Text("Flutter 列表组件"),),
Divider(height: 10,),
ListTile(title: Text("Flutter 列表组件"),),
Divider(height: 10,),
ListTile(title: Text("Flutter 列表组件"),),
Divider(height: 10,),
ListTile(title: Text("Flutter 列表组件"),),
Divider(height: 10,),
ListTile(title: Text("Flutter 列表组件"),),
Divider(height: 10,),
],
);
}
}
class vertical2 extends StatelessWidget {
const vertical2({super.key});
@override
Widget build(BuildContext context) {
return ListView(
children:const <Widget>[
ListTile(
leading: Icon(Icons.access_alarms),
title: Text("全部订单"),
),
ListTile(
leading: Icon(Icons.access_alarms),
title: Text("全部订单"),
),
ListTile(
leading: Icon(Icons.access_alarms),
title: Text("全部订单"),
),
ListTile(
leading: Icon(Icons.access_alarms),
title: Text("全部订单"),
),
ListTile(
leading: Icon(Icons.access_alarms),
title: Text("全部订单"),
),
ListTile(
leading: Icon(Icons.access_alarms),
title: Text("全部订单"),
),
ListTile(
leading: Icon(Icons.access_alarms),
title: Text("全部订单"),
),
ListTile(
leading: Icon(Icons.access_alarms),
title: Text("全部订单"),
),
ListTile(
leading: Icon(Icons.access_alarms),
title: Text("全部订单"),
),
ListTile(
leading: Icon(Icons.access_alarms),
title: Text("全部订单"),
),
ListTile(
leading: Icon(Icons.access_alarms),
title: Text("全部订单"),
),
ListTile(
leading: Icon(Icons.access_alarms),
title: Text("全部订单"),
),
],
);
}
}
class vertical3 extends StatelessWidget {
const vertical3({super.key});
@override
Widget build(BuildContext context) {
return ListView(
children: <Widget>[
ListTile(
leading: Image.network("https://img2024.cnblogs.com/blog/2666697/202403/2666697-20240308045510596-2026591545.png"),
title:const Text("FlutterFlutterFlutterFlutterFlutterFlutterFlutter"),
subtitle: const Text("datadatadatadatadatadatadatadatadatadata"),
),
ListTile(
leading: Image.network("https://img2024.cnblogs.com/blog/2666697/202403/2666697-20240308045525777-1050348584.png"),
title:const Text("FlutterFlutterFlutterFlutterFlutterFlutterFlutter"),
subtitle: const Text("datadatadatadatadatadatadatadatadatadata"),
),
ListTile(
leading: Image.network("https://img2024.cnblogs.com/blog/2666697/202403/2666697-20240308045510596-2026591545.png"),
title:const Text("FlutterFlutterFlutterFlutterFlutterFlutterFlutter"),
subtitle: const Text("datadatadatadatadatadatadatadatadatadata"),
),
ListTile(
leading: Image.network("https://img2024.cnblogs.com/blog/2666697/202403/2666697-20240308045525777-1050348584.png"),
title:const Text("FlutterFlutterFlutterFlutterFlutterFlutterFlutter"),
subtitle: const Text("datadatadatadatadatadatadatadatadatadata"),
),ListTile(
leading: Image.network("https://img2024.cnblogs.com/blog/2666697/202403/2666697-20240308045510596-2026591545.png"),
title:const Text("FlutterFlutterFlutterFlutterFlutterFlutterFlutter"),
subtitle: const Text("datadatadatadatadatadatadatadatadatadata"),
),
ListTile(
leading: Image.network("https://img2024.cnblogs.com/blog/2666697/202403/2666697-20240308045525777-1050348584.png"),
title:const Text("FlutterFlutterFlutterFlutterFlutterFlutterFlutter"),
subtitle: const Text("datadatadatadatadatadatadatadatadatadata"),
),
],
);
}
}
class vertical4 extends StatelessWidget {
const vertical4({super.key});
@override
Widget build(BuildContext context) {
return ListView(
padding: EdgeInsets.all(10),
children: [
Image.network("https://portal-oss.zhiye.com/606179/image/54446b87-fc31-46d6-8847-129206f3f56f.jpg"),
Container(
height: 40,
padding: EdgeInsets.fromLTRB(0, 5, 0, 5),
child:const Text("这是第一张图片",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
color: Colors.black87,
),
),
),
Image.network("https://portal-oss.zhiye.com/606179/image/54446b87-fc31-46d6-8847-129206f3f56f.jpg"),
Container(
height: 50,
padding: EdgeInsets.fromLTRB(0, 10, 0, 5),
child:const Text("这是第一张图片",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
color: Colors.black87,
),
),
),Image.network("https://portal-oss.zhiye.com/606179/image/54446b87-fc31-46d6-8847-129206f3f56f.jpg"),
Container(
height: 40,
padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
child:const Text("这是第一张图片",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
color: Colors.black87,
),
),
),Image.network("https://portal-oss.zhiye.com/606179/image/54446b87-fc31-46d6-8847-129206f3f56f.jpg"),
Container(
height: 40,
padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
child:const Text("这是第一张图片",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
color: Colors.black87,
),
),
),Image.network("https://portal-oss.zhiye.com/606179/image/54446b87-fc31-46d6-8847-129206f3f56f.jpg"),
Container(
height: 40,
padding: EdgeInsets.fromLTRB(0, 5, 0, 10),
child:const Text("这是第一张图片",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
color: Colors.black87,
),
),
),
],
);
}
}
class vertical5 extends StatelessWidget {
const vertical5({super.key});
@override
Widget build(BuildContext context) {
return SizedBox(
height: 180,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
Container(
width: 180,
color: Colors.red,
),
Container(
width: 180,
color: Colors.yellow,
child: Column(
children: [
Image.network("https://img2024.cnblogs.com/blog/2666697/202403/2666697-20240308045525777-1050348584.png",
fit: BoxFit.cover,),
Text("这是一张图片"),
],
),
),
Container(
width: 180,
color: Colors.orange,
),
Container(
width: 180,
color: Colors.black,
),
],
),
);
}
}
本文来自博客园，作者：七七喜欢你，转载请注明原文链接：https://www.cnblogs.com/EternalX/p/18060218
