Flutter中ListView垂直列表组件、水平列表组件

列表布局是项目开发中最常用的一种布局方式&＃xff0c;Flutter 中我们可以通过 ListView 来定义列表项&＃xff0c;支持垂直和水平方向展示。

ListView常见的参数列表&＃xff1a;

1. scrollDirection 列表方向。主要有以下两种&＃xff1a;

(1). Axis.horizontal 水平列表&＃xff1b;

(2). Axis.vertical 垂直列表&＃xff1b;

2. padding 内边距&＃xff1b;

3. reverse 反向排序&＃xff1b;

4. children 子元素&＃xff1b;

先来个简单的列表项&＃xff1a;

import &＃39;package:flutter/material.dart&＃39;;void main(){runApp(MyApp());
}
// 抽离成一个单独的组件
class MyApp extends StatelessWidget{&＃64;overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(// 导航条appBar:AppBar(title:Text(&＃39;Flutter App&＃39;)),// 主体body:HomeContent(),),theme: ThemeData(primarySwatch:Colors.yellow),);}
}// 简单的文字垂直列表
class HomeContent extends StatelessWidget{&＃64;overrideWidget build(BuildContext context) {return ListView(// 内边距padding:EdgeInsets.all(20),// 子元素children: [// 列表项ListTile(// 标题title:Text(&＃39;真心英雄&＃39;,// 字体样式style: TextStyle(fontSize:24,color:Colors.red),),// 副标题subtitle:Text(&＃39;在我心中&＃xff0c;曾经有一个梦&＃xff0c;要用歌声让你忘了所有的痛&＃xff0c;灿烂星空&＃xff0c;谁是真的英雄&＃xff0c;平凡的人给我最多感动&＃xff01;&＃39;)),ListTile(title:Text(&＃39;真心英雄&＃39;,style: TextStyle(fontSize:24,color:Colors.red),),subtitle:Text(&＃39;在我心中&＃xff0c;曾经有一个梦&＃xff0c;要用歌声让你忘了所有的痛&＃xff0c;灿烂星空&＃xff0c;谁是真的英雄&＃xff0c;平凡的人给我最多感动&＃xff01;&＃39;)),ListTile(title:Text(&＃39;真心英雄&＃39;,style: TextStyle(fontSize:24,color:Colors.red),),subtitle:Text(&＃39;在我心中&＃xff0c;曾经有一个梦&＃xff0c;要用歌声让你忘了所有的痛&＃xff0c;灿烂星空&＃xff0c;谁是真的英雄&＃xff0c;平凡的人给我最多感动&＃xff01;&＃39;))]);}
}


效果图如下&＃xff1a;

给列表添加前置与后置图标。

import &＃39;package:flutter/material.dart&＃39;;void main(){runApp(MyApp());
}
// 抽离成一个单独的组件
class MyApp extends StatelessWidget{&＃64;overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(// 导航条appBar:AppBar(title:Text(&＃39;Flutter App&＃39;)),// 主体body:HomeContent(),),theme: ThemeData(primarySwatch:Colors.yellow),);}
}// 给列表添加前置与后置图标
class HomeContent extends StatelessWidget{&＃64;overrideWidget build(BuildContext context) {return ListView(padding:EdgeInsets.all(20),children: [ListTile(// 前置图标leading: Icon(// 图标类型Icons.settings,// 颜色color:Colors.blue,// 图标大小size:40),// 标题title:Text(&＃39;真心英雄&＃39;,// 样式style: TextStyle(fontSize:24,color:Colors.red)),// 副标题subtitle:Text(&＃39;在我心中&＃xff0c;曾经有一个梦&＃xff0c;要用歌声让你忘了所有的痛&＃xff0c;灿烂星空&＃xff0c;谁是真的英雄&＃xff0c;平凡的人给我最多感动&＃xff01;&＃39;),// 后置标题trailing:Icon(Icons.inbox,size:40)),ListTile(leading:Icon(Icons.home,color:Colors.red,size:40),title:Text(&＃39;真心英雄&＃39;,style: TextStyle(fontSize:24,color:Colors.red)),subtitle:Text(&＃39;在我心中&＃xff0c;曾经有一个梦&＃xff0c;要用歌声让你忘了所有的痛&＃xff0c;灿烂星空&＃xff0c;谁是真的英雄&＃xff0c;平凡的人给我最多感动&＃xff01;&＃39;),trailing:Icon(Icons.inbox,size:40))]);}
}

效果图如下&＃xff1a;

给列表加上前置图片,实现常见的图文列表。

import &＃39;package:flutter/material.dart&＃39;;void main(){runApp(MyApp());
}
// 抽离成一个单独的组件
class MyApp extends StatelessWidget{&＃64;overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(// 导航条appBar:AppBar(title:Text(&＃39;Flutter App&＃39;)),// 主体body:HomeContent(),),theme: ThemeData(primarySwatch:Colors.yellow),);}
}// 给列表加上前置图片,实现常见的图文列表
class HomeContent extends StatelessWidget{&＃64;overrideWidget build(BuildContext context) {return ListView(// 内边距padding:EdgeInsets.all(20),children: [ListTile(// 前置图片leading:Image.network("https://www.itying.com/images/flutter/1.png"),// 标题title:Text(&＃39;真心英雄&＃39;,// 样式style: TextStyle(fontSize:24,color:Colors.red)),// 副标题subtitle:Text(&＃39;在我心中&＃xff0c;曾经有一个梦&＃xff0c;要用歌声让你忘了所有的痛&＃xff0c;灿烂星空&＃xff0c;谁是真的英雄&＃xff0c;平凡的人给我最多感动&＃xff01;&＃39;),// 后置图标trailing:Icon(Icons.inbox,size:40)),ListTile(leading:Image.network("https://www.itying.com/images/flutter/2.png"),title:Text(&＃39;真心英雄&＃39;,style: TextStyle(fontSize:24,color:Colors.red)),subtitle:Text(&＃39;在我心中&＃xff0c;曾经有一个梦&＃xff0c;要用歌声让你忘了所有的痛&＃xff0c;灿烂星空&＃xff0c;谁是真的英雄&＃xff0c;平凡的人给我最多感动&＃xff01;&＃39;),trailing:Icon(Icons.inbox,size:40))]);}
}


效果图如下&＃xff1a;

实现常见的视频类小程序首页布局。

import &＃39;package:flutter/material.dart&＃39;;void main(){runApp(MyApp());
}
// 抽离成一个单独的组件
class MyApp extends StatelessWidget{&＃64;overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(// 导航条appBar:AppBar(title:Text(&＃39;Flutter App&＃39;)),// 主体body:HomeContent(),),theme: ThemeData(primarySwatch:Colors.yellow),);}
}// 实现纯图片列表
class HomeContent extends StatelessWidget{&＃64;overrideWidget build(BuildContext context) {return ListView(// 内边距padding:EdgeInsets.all(10),// 子元素children: [Container(// 子元素child:Text(&＃39;美丽风景&＃39;,textAlign: TextAlign.left,style:TextStyle(fontSize: 24)),height: 40,padding: EdgeInsets.fromLTRB(0, 0, 10, 0),),// 加载网络图片Image.network("https://www.itying.com/images/flutter/1.png"),Container(child:Text(&＃39;美丽风景&＃39;,textAlign: TextAlign.left,style:TextStyle(fontSize: 24)),height: 40,padding: EdgeInsets.fromLTRB(0, 0, 10, 0),),Image.network("https://www.itying.com/images/flutter/2.png"),Container(child:Text(&＃39;美丽风景&＃39;,textAlign: TextAlign.left,style:TextStyle(fontSize: 24)),height: 40,padding: EdgeInsets.fromLTRB(0, 0, 10, 0),),Image.network("https://www.itying.com/images/flutter/3.png"),Container(child:Text(&＃39;美丽风景&＃39;,textAlign: TextAlign.left,style:TextStyle(fontSize: 24)),height: 40,padding: EdgeInsets.fromLTRB(0, 0, 10, 0),),Image.network("https://www.itying.com/images/flutter/4.png")]);}
}

效果图如下&＃xff1a;

横向列表的实现。

import &＃39;package:flutter/material.dart&＃39;;void main(){runApp(MyApp());
}
// 抽离成一个单独的组件
class MyApp extends StatelessWidget{&＃64;overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(// 导航条appBar:AppBar(title:Text(&＃39;Flutter App&＃39;)),// 主体body:HomeContent(),),theme: ThemeData(primarySwatch:Colors.yellow),);}
}// 水平列表
class HomeContent extends StatelessWidget{&＃64;overrideWidget build(BuildContext context) {return Container(// 横向滚动列表一定要指定高度&＃xff0c;否则会自动填充为全屏高度height:180.0,child:ListView(// 内边距padding:EdgeInsets.all(10),// 水平列表scrollDirection: Axis.horizontal,// 子元素children: [Container(// 宽度width:180.0,// 颜色color:Colors.red,// 子元素child:ListView(children: [Image.network("https://www.itying.com/images/flutter/1.png"),Text(&＃39;这是一个标题&＃39;,style:TextStyle(fontSize: 14.0),textAlign: TextAlign.center,)],)),Container(width:180.0,color:Colors.yellow,child:ListView(children: [Image.network("https://www.itying.com/images/flutter/2.png"),Text(&＃39;这是一个标题&＃39;,style:TextStyle(fontSize: 14.0),textAlign: TextAlign.center,)],)),Container(width:180.0,color:Colors.blue,child:ListView(children: [Image.network("https://www.itying.com/images/flutter/3.png"),Text(&＃39;这是一个标题&＃39;,style:TextStyle(fontSize: 14.0),textAlign: TextAlign.center,)],)),Container(width:180.0,color:Colors.green,child:ListView(children: [Image.network("https://www.itying.com/images/flutter/4.png"),Text(&＃39;这是一个标题&＃39;,style:TextStyle(fontSize: 14.0),textAlign: TextAlign.center,)],)),]));}
}

效果图如下&＃xff1a;