创建一个flutter屏幕列表

Question

我想在抽屉上单击项目时浏览多个屏幕，但每次添加列表中有参数的屏幕时都会出现错误。

final List<Widget> Screens = [
Home(),
Search(),
Compose(contacts),
Favourite(contacts),
Inbox(),
];

我把它放在我的主体上，就像一样

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
resizeToAvoidBottomInset: true,
backgroundColor: Colors.white,
drawer: SideBar(_changeIndexNumber),
appBar: AppBar(
backgroundColor: Colors.transparent,
iconTheme: IconThemeData(color: Colors.black),
elevation: 0,
foregroundColor: Colors.white,
title: TextField(
style: TextStyle(
fontFamily: 'Footlight',
color: Colors.white,
backgroundColor: Colors.white),
decoration: InputDecoration(
border: UnderlineInputBorder(), hintText: 'Search...'),
),
actions: [
Container(
padding: EdgeInsets.fromLTRB(5, 2, 5, 2),
child: Icon(Icons.logout_outlined),
)
],
),
body: Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
child: Screens[screenIndex],
),
),
);
}
}

完整代码的链接https://github.com/BuffyJoe/Email-App-Flutter.git

编辑为显示边栏

import 'package:flutter/material.dart';
class SideBar extends StatelessWidget {
final Function _changeIndexNumber;
SideBar(this._changeIndexNumber);
@override
Widget build(BuildContext context) {
return Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
const DrawerHeader(
padding: EdgeInsets.zero,
child: UserAccountsDrawerHeader(
accountEmail: Text('[e-mail]'),
accountName: Text('O.Emmanuel'),
currentAccountPicture: CircleAvatar(
child: ClipOval(
child: Image(
image: AssetImage('assets/images/new.jpg'),
fit: BoxFit.cover,
height: 90,
width: 90,
),
),
),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/chatbackground.png'),
fit: BoxFit.fill),
),
),
),
ListTile(
leading: Icon(Icons.login),
title: Text('Log-in'),
onTap: () {
_changeIndexNumber(1);
Navigator.pop(context);
},
),
ListTile(
leading: Icon(Icons.home_filled),
title: Text('Home'),
onTap: () {
_changeIndexNumber(0);
Navigator.pop(context);
},
),
Container(
child: Column(
children: [
ExpansionTile(
leading: Icon(Icons.all_inbox_rounded),
title: Text('All Messages'),
trailing: Icon(Icons.expand_more_outlined),
children: [
Container(
height: 400,
child: ListView(
padding: EdgeInsets.fromLTRB(20, 2, 2, 2),
children: [
ListTile(
leading: Icon(Icons.inbox_rounded),
title: Text('Primary'),
onTap: null,
),
ListTile(
leading: Icon(Icons.people_outline_outlined),
title: Text('Social'),
onTap: null,
),
ListTile(
leading: Icon(
Icons.label,
),
title: Text('Promotions'),
// style: ListTileStyle.list,
),
ListTile(
leading: Icon(
Icons.info,
),
title: Text('Spam'),
),
ListTile(
leading: Icon(Icons.drafts),
title: Text('Drafts'),
onTap: null,
),
ListTile(
leading: Icon(Icons.send),
title: Text('Sent'),
onTap: null,
),
ListTile(
leading: Icon(Icons.label),
title: Text('Proposal'),
onTap: null,
),
ListTile(
leading: Icon(Icons.inbox_rounded),
title: Text('Primary'),
onTap: null,
),
ListTile(
leading: Icon(
Icons.star_border_purple500_rounded,
),
title: Text('starred'),
),
],
),
),
],
),
ListTile(
leading: Icon(
Icons.contact_mail,
),
title: Text('Contacts'),
onTap: () {
_changeIndexNumber(4);
Navigator.pop(context);
},
),
ListTile(
leading: Icon(
Icons.settings,
),
title: Text('Settings'),
),
ListTile(
leading: Icon(
Icons.local_activity_rounded,
),
title: Text(
'Activity',
),
onTap: () {
_changeIndexNumber(2);
Navigator.pop(context);
},
),
],
),
)
],
),
);
}
}

Answer 1

生成最终变量：VoidCallback ontap；然后调用手势中的ontap手势检测器，如下所示：

GestureDetector(
onTap: ontap,
child: const Icon(
Icons.arrow_forward_ios,
size: 18,
color: Colors.white,
),
)

列出主要类别的清单如下：

final screens = [
EditProfile(),
BottomModel(),
Orders(),
ProductList(),

];

然后导航器上的呼叫列表如下：

ontap: () {
Navigator.push(
context,
MaterialPageRoute(
uilder: (_) => screens[index]));
},