Flutter39.Opensource China Find界面ListView嵌套ListView(11)

discovery_page.dart

import 'package:flutter/material.dart';

/**
 * 主界面find
 */
class DiscoveryPage extends StatefulWidget {
  @override
  _DiscoveryPageState createState() => _DiscoveryPageState();
}

class _DiscoveryPageState extends State<DiscoveryPage> {
  List<Map<String, IconData>> blocks = [
    {
      '开源众包': Icons.pageview,
      '开源软件': Icons.speaker_notes_off,
      '码云推荐': Icons.screen_share,
      '代码骗贷': Icons.assignment,
    },
    {
      '扫一扫': Icons.camera_alt,
      '摇一摇': Icons.camera,
    },
    {
      '码云封面人物': Icons.person,
      '线下活动': Icons.android,
    }
  ];

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: blocks.length,
      itemBuilder: (context, bolockIndex) {
        return Container(
          margin: const EdgeInsets.symmetric(vertical: 10.0),
          //线条边框设置
          decoration: BoxDecoration(
            border: Border(
              top: BorderSide(
                width: 1.0,
                color: Color(0xffaaaaaa),
              ),
              bottom: BorderSide(
                width: 1.0,
                color: Color(0xffaaaaaa),
              ),
            ),
          ),
          //listview嵌套，自带分割线。3个子模块
          child: ListView.separated(
            physics: NeverScrollableScrollPhysics(),//滑动冲突
            shrinkWrap: true,//显示完全
            itemBuilder: (context, mapIndex) {
              //InkWell有点击效果
              return InkWell(
                //点击事件
                onTap: (){
                },
                //listview单个条目的布局
                child: Container(
                  height: 60.0,
                  child: ListTile(
                    leading: Icon(
                        blocks[bolockIndex].values.elementAt(mapIndex)),
                    title:
                    Text(blocks[bolockIndex].keys.elementAt(mapIndex)),
                    trailing: Icon(Icons.arrow_forward_ios),
                  ),
                ),
              );
            },
            //子listview的分隔线
            separatorBuilder: (context, mapIndex) {
              return Divider(
                height: 2.0,
                color: Color(0xffff0000),
              );
            },
              //子listview的数量是各个block的
            itemCount: blocks[bolockIndex].length),
        );
      }
    );
  }
}

效果