【Flutter】ListView 列表 ( List 集合的 map 方法说明 | 垂直列表 | 水平列表 | 代码示例 )

举报
韩曙亮 发表于 2022/01/11 01:47:59 2022/01/11
【摘要】 文章目录 一、List 集合的 map 方法说明 ( 生成 ListView 组件集合 )二、ListView 垂直列表三、ListView 水平列表四、相关资源 一、Lis...





一、List 集合的 map 方法说明 ( 生成 ListView 组件集合 )



ListView 列表的控件条目 , 一般是遍历集合生成的 ;

如 : 给定如下 List 集合 ;

const NAMES = [ '宋江', '卢俊义', '吴用', '公孙胜', '关胜'];

  
 
  • 1

调用 List 集合的 map 方法 , 可以遍历操作集合中的每一项 , 返回一个新的数组 ;

map 方法的原型如下 ;

  Iterable<T> map<T>(T f(E e)) => MappedIterable<E, T>(this, f);

  
 
  • 1

使用 map 方法 , 遍历 NAMES 集合 , 然后传入的匿名方法中 , 返回 Widget 组件 , 那么上述原型中的泛型 T 就是 Widget 类型 ;

下面的方法中 , map 方法传入了一个匿名函数 , 参数是 name , 类型是 String , 返回值是 _generateWidget 函数的返回值 , 其中 _generateWidget 函数返回 Widget 类型 , 最终 map 方法的返回值是 Iterable<Widget> 类型 , 然后调用 toList() 方法 , 将其转为 List<Widget> 类型 ;

NAMES.map((name) => _generateWidget(name)).toList();

  
 
  • 1




二、ListView 垂直列表



完整代码示例 :

import 'package:flutter/material.dart';

const NAMES = [ '宋江', '卢俊义', '吴用', '公孙胜', '关胜',
                '林冲', '秦明', '呼延灼', '花荣', '柴进',
                '李应', '朱仝', '鲁智深', '武松', '董平',
                '张清', '杨志', '徐宁', '索超', '岱宗',
                '刘唐', '李逵', '史进', '穆弘' '雷横' ];

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    /// 材料设计主题
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          /// 标题组件
          title: Text("ListView 示例"),
        ),

        /// 列表组件
        body: ListView(
          children: _buildList(),
        ),
      ),
    );
  }

  /// 创建列表
  List<Widget> _buildList(){
    /// 遍历 NAMES 数组
    /// 调用 map 方法遍历数组元素
    return NAMES.map((name) => _generateWidget(name)).toList();
  }

  Widget _generateWidget(name){
    return Container(
      height: 80,
      margin: EdgeInsets.only(bottom: 5),
      alignment: Alignment.center,
      decoration: BoxDecoration(color: Colors.black),
      child: Text(
        name,
        style: TextStyle(
            color: Colors.yellowAccent,
            fontSize: 20
        ),
      ),
    );
  }
}

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61

执行结果 :

在这里插入图片描述





三、ListView 水平列表



import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

const NAMES = [ '宋江', '卢俊义', '吴用', '公孙胜', '关胜',
                '林冲', '秦明', '呼延灼', '花荣', '柴进',
                '李应', '朱仝', '鲁智深', '武松', '董平',
                '张清', '杨志', '徐宁', '索超', '岱宗',
                '刘唐', '李逵', '史进', '穆弘' '雷横' ];

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    /// 材料设计主题
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          /// 标题组件
          title: Text("ListView 示例"),
        ),

        /// 列表组件
        body: ListView(
          /// 水平滚动设置
          scrollDirection: Axis.horizontal,
          children: _buildList(),
        ),
      ),
    );
  }

  /// 创建列表
  List<Widget> _buildList(){
    /// 遍历 NAMES 数组
    /// 调用 map 方法遍历数组元素
    return NAMES.map((name) => _generateWidget(name)).toList();
  }

  Widget _generateWidget(name){
    return Container(
      //height: 80,
      width: 80,
      //margin: EdgeInsets.only(bottom: 5),
      margin: EdgeInsets.only(right: 5),
      alignment: Alignment.center,
      decoration: BoxDecoration(color: Colors.black),
      child: Text(
        name,
        style: TextStyle(
            color: Colors.yellowAccent,
            fontSize: 20
        ),
      ),
    );
  }
}

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66

执行结果 :

请添加图片描述





四、相关资源



参考资料 :


重要的专题 :


博客源码下载 :

文章来源: hanshuliang.blog.csdn.net,作者:韩曙亮,版权归原作者所有,如需转载,请联系作者。

原文链接:hanshuliang.blog.csdn.net/article/details/119932936

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200