1.多文本情况
![](https://img2024.cnblogs.com/blog/2666697/202403/2666697-20240308045525777-1050348584.png)
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
![](https://img2024.cnblogs.com/blog/2666697/202403/2666697-20240308045510596-2026591545.png)
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
![](https://img2024.cnblogs.com/blog/2666697/202403/2666697-20240308051301685-428116509.png)
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
![](https://img2024.cnblogs.com/blog/2666697/202403/2666697-20240308052821734-1430247698.png)
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.水平列表
![](https://img2024.cnblogs.com/blog/2666697/202403/2666697-20240308054553692-123008872.png)
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, |
| ), |
| |
| ], |
| ), |
| ); |
| } |
| } |
所有代码:
| |
| 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: [ |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| 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, |
| ), |
| |
| ], |
| ), |
| ); |
| } |
| } |
| |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 本地部署 DeepSeek:小白也能轻松搞定!
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 从 Windows Forms 到微服务的经验教训
· 李飞飞的50美金比肩DeepSeek把CEO忽悠瘸了,倒霉的却是程序员
· 超详细,DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方Dee