Dart列表组件详解

列表布局是开发中最常用的一种布局方式,Flutter中我们可以通过ListView来定义列表项,支持垂直和水平方向展示,通过一个属性就可以控制列表的显示方向,列表有以下分类:

1.垂直列表

2.垂直图文列表

3.水平列表

4.动态列表

5.矩阵式列表

Flutter列表参数

名称	类型	说明
scollDirection	Axis	Axis.horizontal水平列表 Axis.vertical垂直列表
padding	EdgeInsetsGeometry	内边距
resolve	bool	组件反向排序
children	List<Widget>	列表元素

Flutter基本列表

默认垂直列表

class HomeContent extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
        // TODO: implement build 
        return Center( 
            child: ListView( 
                children: 
                [ 
                    ListTile( 
                        leading: Icon(Icons.phone), 
                        title: Text(
                            "this is list",
                            style: TextStyle(fontSize: 28.0),
                        ), 
                        subtitle: Text(
                            'this is list this is list',
                        ),
                    ),
                    ListTile( 
                        title: Text("this is list"), 
                        subtitle: Text('this is list this is list'), 
                        trailing: Icon(Icons.phone), 
                    ) ,
                    ListTile( 
                        title: Text("this is list"), 
                        subtitle: Text('this is list this is list'),
                    ),
                    ListTile( 
                        title: Text("this is list"), 
                        subtitle: Text('this is list this is list'), 
                    ),
                    ListTile( 
                        title: Text("this is list"), 
                        subtitle: Text('this is list this is list'), 
                    ) 
                ], 
            ),  
        ); 
    } 
}

水平列表

class HomeContent extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
        // TODO: implement build 
        return Container( 
            height:200.0, 
            margin: EdgeInsets.all(5), 
            child:ListView( 
                scrollDirection: Axis.horizontal, 
                children: 
                [ 
                    Container( 
                        width:180.0, 
                        color: Colors.lightBlue, 
                    ),
                    Container( 
                        width:180.0, 
                        color: Colors.amber, 
                        child: 
                        ListView( 
                            children: 
                            [ 
                                Image.network( 'https://resources.ninghao.org/images/childhood-in-a-picture.jpg' ),
                                SizedBox(height: 16.0), 
                                Text(
                                    '这是一个文本信息', 
                                    textAlign: TextAlign.center, 
                                    style: TextStyle(fontSize: 16.0 ), 
                                ) 
                            ], 
                        ),  
                    ),
                    Container( 
                        width:180.0, 
                        color: Colors.deepOrange, 
                    ),
                    Container( 
                        width:180.0, 
                        color: Colors.deepPurpleAccent, 
                    ), 
                ], 
            ) 
        );
    } 
}