List into a class show it after a clickable ListView.builder in flutter

Question

我创建了这些 classes 和这个列表，以使其在带有 ListView.builder 的 flutter 中可以点击。当我点击一个名字时，我会进入氏族页面。如何显示氏族 class 中的成员列表并使其可点击“成员个人资料页面”？或者有其他方法吗？

这些是 classes

class Clan{
  String name;int member;DateTime born;
  List<MemberClan> listMemberClan;
  List<Videogame> listVieogame;
  Clan ({this.born,this.member,this.name, this.listMemberClan, this.listVieogame});
}

class MemberClan{
  String memberClanName, email; int age;
  List<Videogame> memberVideogamelist;
  MemberClan({this.age,this.email,this.memberClanName, this.memberVideogamelist});
}

class Videogame{
  String videogameName, softwarehouse, type;
  Videogame({this.softwarehouse,this.videogameName,this.type});
}

List<Clan> clanList =[
  Clan(
    name: "Wof",
    member: 2,
    listMemberClan: [
      MemberClan(
        memberClanName: "redwolf",
        email: "redwolf@email.com",
        memberVideogamelist: [
          Videogame(
            videogameName: "fifa20",
            softwarehouse: "Ea",
            type: "sport"
          ),
        ]
      ),
      MemberClan(
        memberClanName: "shaps",
        email: "shaps@email.com",
        memberVideogamelist: [
          Videogame(
            videogameName: "fifa21",
            softwarehouse: "Ea",
            type: "sport"
          ),
          Videogame(
            videogameName: "callofduty MW",
            softwarehouse: "Activision",
            type: "fps"
          ),
        ]
      ),
    ],
  ),
  Clan(
    name: "Ika",
    member: 1,
     listMemberClan: [
      MemberClan(
        memberClanName: "stinfo",
        email: "stinfo@email.com",
        memberVideogamelist: [
          Videogame(
            videogameName: "Call Of Duty: MW",
            softwarehouse: "Activision",
            type: "fps"
          ),
        ]
      ),
    ],
    
  ),
];

这些是列表的简单小部件，clanpage 只是一个简单的例子，没有 UI

class ClanList extends StatelessWidget {
  final Clan clan;
  final MemberClan memberClan;
  final Videogame videogame;

  const ClanList({Key key, this.clan, this.memberClan, this.videogame})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Expanded(
          child: ListView.builder(
            itemCount: clanList.length,
            itemBuilder: (context, index) => InkWell(onTap: (){Navigator.push(context, MaterialPageRoute(builder: (context)=> ClanPage(clan: clanList[index],)));},
                          child: ListTile(
                title: Text(clanList[index].name),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class ClanPage extends StatelessWidget {
  final Clan clan;
  final MemberClan memberClan;
  final Videogame videogame;

  const ClanPage({Key key, this.clan, this.memberClan, this.videogame})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Text(clan.name),
            Text(clan.member.toString()),
            //here i want show a clickable list of the member
            //and tap or clik on name I want show the member profilepage
          ],
        ),
      ),
    );
  }
}

Answer 1

在您的氏族class中添加以下代码：-

class ClanPage extends StatelessWidget {
  final Clan clan;
  final MemberClan memberClan;
  final Videogame videogame;

  const ClanPage({Key key, this.clan, this.memberClan, this.videogame})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Expanded(
          child: ListView.builder(
            itemCount: clan.listMemberClan.length,
            itemBuilder: (context, index) => ListTile(
              onTap: (){Navigator.push(context, MaterialPageRoute(builder: (context)=> MemberPage(memberClan: clan.listMemberClan[index],)));},
              title: Text(clan.listMemberClan[index]),
            ),
          ),
        ),
      ),
    );
  }
}

class MemberPage extends StatelessWidget {
  final MemberClan memberClan;
  const ClanPage({this.memberClan});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        //show your details here like:-
        child:Text(memberClan.email),
      )
    );
  }
}

List into a class show it after a clickable ListView.builder in flutter

List into a class show it after a a clickable ListView.builder in flutter

listview

class

navigator

dart

flutter