Flutter从入门到跑路 ------ListView 列表组件、水平组件、列表组件(二)

列表组件

  • 垂直列表
  • 垂直图文列表
  • 水平列表
  • 动态列表
  • 矩阵列表
名称 说明
scrollDirection Axis.horizontal 水平 Axis.vertical 垂直列表
padding 内边距
resolve 反向排序
children List
ScrollDirection:Axis.Axis.horizontal // 水平列表
 基本列表
 class LayoutDemos extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: [
              AspectRatio(
                aspectRatio: 16/9,
                child: Image.network('https://www.itying.com/images/flutter/1.png',fit: BoxFit.cover),
              ),
              ListTile(
                leading: ClipOval(
                child: Image.network('https://www.itying.com/images/flutter/1.png',fit: BoxFit.cover,height: 60,width: 60,),
                ),
                title: Text('xxxx'),
                subtitle: Text('xxxxxxx'),
              )
            ],
          ),
        )
      ],
    );
  }
}

动态列表

class Layout extends StatelessWidget {
//自定义方法
   Widget   _getListData(context,index){
     return Container(
        child: Column(
          children: [
            Image.network(listData[index]['imageUrl']),
            SizedBox(height: 15),
            Text(
              listData[index]['title'],
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 20
              ),
             ),
           ],
          ),
        ),
      );
  }
  

你可能感兴趣的:(flutter)