Flutter 组件之ListView列表、Icon图标

快来打我* 2023-07-16 03:47 28阅读 0赞

> 垂直列表可以直接定义盒子宽度,列表的宽度不生效。水平列表要定义宽度

##### 入口文件 #####

import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    import 'movies.dart';
    
    void main() { 
      runApp(StudyListShow());
    }
    
    // 页面主结构
    class StudyListShow extends StatelessWidget { 
      @override
      Widget build(BuildContext context) { 
        // TODO: implement build
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text("演员列表"),
            ),
            body: MoviesList(),
          ),
        );
      }
    }

##### 动态渲染列表for循环 #####

//动态渲染列表
     class MoviesList extends StatelessWidget { 
      //for 循环
       List<Widget> _getListMovies() { //列表数组Widget类型
        List<Widget> moviList = new List();//创建空数组
        for (var i = 0; i < 20; i++) { 
           moviList.add(ListTile(//ListTile列表子元素结构层
           	 leading: Icon(Icons.home),//头部图标
             title: Text("我是第$i"),//标题
             subtitle: Text("我是子标题"),//子标题
             trailing:Icon(Icons.search)//尾部图标
           ));
         }
         return moviList;
      }
    
      @override
      Widget build(BuildContext context) { 
        // TODO: implement build
          return Container(
             child: ListView(children: this._getListMovies(),),
          );
        ));
      }
    }

##### map循环数据 #####

//动态渲染列表
    class MoviesList extends StatelessWidget { 
      //map循环数据
       List<Widget> _getMoveiDataList(){ //列表数组
         var tempList = casts.map((value){ //map遍历
           return ListTile(//返回数组数据
             leading: Image.network(value["avatars"],width: 200,height: 200,fit: BoxFit.cover,),//网络图片leading
             title: Text(value["name"]),
             subtitle: Text(value["name_en"]),
           );
         });
         //其实返回的是这种格式,(ListTile(leading:....,title:...),ListTile(leading:....),ListTile(leading:....))
         return tempList.toList();//转成List
       }
    
      @override
      Widget build(BuildContext context) { 
        // TODO: implement build
         return Container(
             child: ListView(children: this._getListMovies(),),
          );
        ));
      }
    }

##### ListView.builder 构建列表 #####

//ListView.builder 构建
      Widget _getMoveisForBuilder(context,index) { //这里必须是Widget类型
        return ListTile(
          leading: Image.network(casts[index]["avatars"],width:100,height: 100,fit: BoxFit.cover,),
          title: Text(casts[index]["name"]),
          subtitle: Text(casts[index]["name_en"]),
          );
      }
    
      @override
      Widget build(BuildContext context) { 
        // TODO: implement build
          return ListView.builder(
            scrollDirection: Axis.horizontal,
           padding: EdgeInsets.all(10),
           itemCount: casts.length,
           itemBuilder:this._getMoveisForBuilder,
         );
      }
    }

##### 栅格 网格 GridView 布局用法类似 #####

import 'package:flutter/material.dart';
    import 'movies.dart';
    
    void main() { 
      runApp(HomeApp());
    }
    
    class HomeApp extends StatelessWidget { 
      @override
      Widget build(BuildContext context) { 
        // TODO: implement build
        return MaterialApp(
            home: Scaffold(
          appBar: AppBar(
            title: Text("Gradle View"),
          ),
          body: StudyGradleView(),
        ));
      }
    }
    
    //gradle view
    class StudyGradleView extends StatelessWidget { 
      // for 循环
       List<Widget> _getGridViewData() { 
         List<Widget> listData = new List();
         for (var i = 0; i < 20; i++) { 
           listData.add(Container(
             child: Text("着还是地$i条数据",textAlign: TextAlign.center,),
             decoration: BoxDecoration(
               color:Colors.pink
             ),
           ));
         }
         return listData.toList();
       }
    
    // // map 循环
      List<Widget> _getGridViewData() { 
        var tempList = casts.map((value){ 
            return Container(
              child: Column(
                children:<Widget>[
                  Image.network(value['avatars']),
                   SizedBox(height: 20,),
                  Text(value['name'])
                ]
              ),
            );
        });
        return tempList.toList();
      }
    
      //GridView.count
      @override
      Widget build(BuildContext context) { 
        // TODO: implement build
        return GridView.count(
          padding: EdgeInsets.all(10),
          crossAxisSpacing: 10,
          crossAxisCount: 2,
          mainAxisSpacing: 10,
          children: this._getGridViewData(),
        );
      }
    }

##### 数据 #####

List casts = [
      { 
        "avatars":
            "https://img9.doubanio.com/view/celebrity/s_ratio_celebrity/public/p17525.jpg",
        "name_en": "Tim Robbins",
        "name": "蒂姆·罗宾斯",
        "alt": "https://movie.douban.com/celebrity/1054521/",
        "id": "1054521"
      },
      { 
        "avatars":
            "https://img3.doubanio.com/view/celebrity/s_ratio_celebrity/public/p34642.jpg",
        "name_en": "Morgan Freeman",
        "name": "摩根·弗里曼",
        "alt": "https://movie.douban.com/celebrity/1054534/",
        "id": "1054534"
      },
      { 
        "avatars":
            "https://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p5837.jpg",
        "name_en": "Bob Gunton",
        "name": "鲍勃·冈顿",
        "alt": "https://movie.douban.com/celebrity/1041179/",
        "id": "1041179"
      },
      { 
        "avatars":
            "https://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p67.jpg",
        "name_en": "Leslie Cheung",
        "name": "张国荣",
        "alt": "https://movie.douban.com/celebrity/1003494/",
        "id": "1003494"
      },
      { 
        "avatars":
            "https://img9.doubanio.com/view/celebrity/s_ratio_celebrity/public/p46345.jpg",
        "name_en": "Fengyi Zhang",
        "name": "张丰毅",
        "alt": "https://movie.douban.com/celebrity/1050265/",
        "id": "1050265"
      },
      { 
        "avatars":
            "https://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1399268395.47.jpg",
        "name_en": "Li Gong",
        "name": "巩俐",
        "alt": "https://movie.douban.com/celebrity/1035641/",
        "id": "1035641"
      },
      { 
        "avatars":
            "https://img3.doubanio.com/view/celebrity/s_ratio_celebrity/public/p28603.jpg",
        "name_en": "Tom Hanks",
        "name": "汤姆·汉克斯",
        "alt": "https://movie.douban.com/celebrity/1054450/",
        "id": "1054450"
      },
      { 
        "avatars":
            "https://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1537890386.77.jpg",
        "name_en": "Robin Wright",
        "name": "罗宾·怀特",
        "alt": "https://movie.douban.com/celebrity/1002676/",
        "id": "1002676"
      },
      { 
        "avatars":
            "https://img9.doubanio.com/view/celebrity/s_ratio_celebrity/public/p26315.jpg",
        "name_en": "Gary Sinise",
        "name": "加里·西尼斯",
        "alt": "https://movie.douban.com/celebrity/1031848/",
        "id": "1031848"
      }
    ];