flutter - 有没有办法在 Flutter/Dart 中添加导航路线列表?
问题描述
我是 Flutter/Dart 的新手,但我尝试了几种方法来将导航路线添加到我分配给网格视图的列表中。这可能不是最有效的方法,但这是首先想到的。我想在卡片上添加一个 InkWell 并让导航路线通过这种方式。除此之外,我能想到的唯一其他解决方案是创建一个遍历列表的 OnTap 函数。目前,导航列表选择给了我一个错误,提示“无法将未来对象分配给导航器的参数类型”,因为它是一个常量,所以我得到了这个错误。但我尝试了其他一些方法并得到了类似的结果。我当前的配置做错了什么,是否有更好/更有效的解决方案?
这是我的选择列表:
class Choice {
const Choice({this.title, this.icon, this.nav});
final String title;
final IconData icon;
final Navigator nav;
}
const List<Choice> choices = const <Choice>[
const Choice(title: 'Timer', icon: Icons.timer, nav: Navigator.pushNamed(context, TestConfirmation.id)),
const Choice(title: 'Seating Chart', icon: Icons.event_seat),
const Choice(title: 'Random', icon: Icons.shuffle),
const Choice(title: 'Group Maker', icon: Icons.group_add),
const Choice(title: 'Noise Monitor', icon: Icons.hearing),
const Choice(title: 'Assign Tasks', icon: Icons.assignment_ind),
const Choice(title: 'Survey', icon: Icons.rate_review),
const Choice(title: 'Permission Slips', icon: Icons.assignment),
const Choice(title: 'Lesson Plans', icon: Icons.local_library),
const Choice(title: 'Attendance', icon: Icons.schedule),
const Choice(title: 'Gradebook', icon: Icons.insert_chart)
];
这是我的卡片:
class ChoiceCard extends StatelessWidget {
const ChoiceCard({Key key, this.choice}) : super(key: key);
final Choice choice;
@override
Widget build(BuildContext context) {
final TextStyle textStyle = Theme.of(context).textTheme.subhead;
return Card(
color: Colors.white,
child: InkWell(
//onTap: choice.navigation,
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: Icon(choice.icon,
size: 90.0, color: textStyle.color)),
Text(choice.title, style: textStyle),
]),
),
));
}
}
解决方案
您可以在下面复制粘贴运行完整代码
您可以使用Function
而不是Navigator
代码片段
class Choice {
String title;
IconData icon;
Function nav;
...
@override
void initState() {
choices = [
Choice(
title: 'Timer',
icon: Icons.timer,
nav: () {
Navigator.pushNamed(context, "/first");
}),
Choice(
title: 'Seating Chart',
icon: Icons.event_seat,
nav: () {
Navigator.pushNamed(context, "/second");
}),
工作演示
完整代码
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
initialRoute: '/',
routes: {
'/': (context) => HomeContent(),
'/first': (context) => FirstScreen(),
'/second': (context) => SecondScreen(),
});
}
}
class Choice {
String title;
IconData icon;
Function nav;
Choice({this.title, this.icon, this.nav});
}
class HomeContent extends StatefulWidget {
// builder
@override
_HomeContentState createState() => _HomeContentState();
}
class _HomeContentState extends State<HomeContent> {
List<Choice> choices = [];
@override
void initState() {
choices = [
Choice(
title: 'Timer',
icon: Icons.timer,
nav: () {
Navigator.pushNamed(context, "/first");
}),
Choice(
title: 'Seating Chart',
icon: Icons.event_seat,
nav: () {
Navigator.pushNamed(context, "/second");
}),
Choice(title: 'Random', icon: Icons.shuffle),
Choice(title: 'Group Maker', icon: Icons.group_add),
Choice(title: 'Noise Monitor', icon: Icons.hearing),
Choice(title: 'Assign Tasks', icon: Icons.assignment_ind),
Choice(title: 'Survey', icon: Icons.rate_review),
Choice(title: 'Permission Slips', icon: Icons.assignment),
Choice(title: 'Lesson Plans', icon: Icons.local_library),
Choice(title: 'Attendance', icon: Icons.schedule),
Choice(title: 'Gradebook', icon: Icons.insert_chart)
];
}
Widget _itemBuilderFunc(BuildContext context, int index) {
return ChoiceCard(
choice: choices[index],
);
}
@override
Widget build(BuildContext context) {
return GridView.builder(
itemCount: choices.length,
itemBuilder: this._itemBuilderFunc,
padding: EdgeInsets.fromLTRB(12, 12, 12, 0),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
childAspectRatio: 0.75),
);
}
}
class ChoiceCard extends StatelessWidget {
const ChoiceCard({Key key, this.choice}) : super(key: key);
final Choice choice;
@override
Widget build(BuildContext context) {
final TextStyle textStyle = Theme.of(context).textTheme.subhead;
return Card(
color: Colors.white,
child: InkWell(
onTap: choice.nav,
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: Icon(choice.icon,
size: 90.0, color: textStyle.color)),
Text(choice.title, style: textStyle),
]),
),
));
}
}
class FirstScreen extends StatefulWidget {
@override
_FirstScreenState createState() => _FirstScreenState();
}
class _FirstScreenState extends State<FirstScreen> {
@override
Widget build(BuildContext context) {
return Text("First Screen");
}
}
class SecondScreen extends StatefulWidget {
@override
_SecondScreenState createState() => _SecondScreenState();
}
class _SecondScreenState extends State<SecondScreen> {
@override
Widget build(BuildContext context) {
return Text("Second Screen");
}
}
推荐阅读
- flutter - ThemeData(primaryColor: Colors.red) 和提供 ColorScheme.primary 有什么区别
- angular - 未捕获(承诺):错误:未找到名称“ngForm”的导出
- java - 找不到按钮 Selenium Webdriver
- python - Azure Functions:执行函数时出现异常:Functions.x <--- 结果:失败异常:ModuleNotFoundError:没有名为“_cffi_backend”的模块
- regex - StandardSQL:我只想在括号内提取
- android - 我在检查我的电子邮件字段时遇到问题
- javascript - 如何使已删除的数据库数据反映在我的 mount() 渲染中?
- jquery - 根据 h1 文本字符串显示 None 和 Block
- php - 使用 Ajax WordPress 复选框获取模板
- arduino - 如何重复向蓝牙模块arduino发送AT命令