我正在尝试构建网格项目视图,每个项目应具有不同的文本和不同的登录页面。例如,单击Android开发网格项目时,应转到Android Dev。页和Web开发网格项,当按下时应导航到Web开发页。
var gridView = new GridView.builder(
itemCount: 2,
gridDelegate:
new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemBuilder: (BuildContext context, int index) {
return new GestureDetector(
child: new Card(
elevation: 5.0,
child: new Container(
alignment: Alignment.center,
child: new Text('Android Development')),
),
onTap: () => _navigateToQuizPage(context),
);
});
return new DefaultTabController(
length: 1,
child: new Scaffold(
appBar: new AppBar(
title: new Text("Flutter TabBar"),
bottom: tabBarItem,
),
body: new TabBarView(
controller: tabController,
children: [gridView],
),
),
);
}
void _navigateToQuizPage(BuildContext context) {
Navigator.of(context).push(new MaterialPageRoute(
builder: (BuildContext context) => new AndroidQuiz()));
}
答案 0 :(得分:0)
首先,我建议使用默认的GridView构造函数而不是GridView.builder
。您只需添加标题和路线已调整的卡片即可。在此示例中,我对不同的最终视图使用了不同的路线。
另一种解决方案是将参数传递给路线,然后根据该参数更改视图。如果这将是适合您的问题的解决方案,请发表评论,我将编辑此答案以提供示例。
独立示例(无后续视图):
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: MyGrid(),
),
);
}
}
class MyGrid extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GridView.count(crossAxisCount: 2, children: <Widget>[
MyCard(title: 'Web Development', route: '/web'),
MyCard(title: 'Android Development', route: '/android'),
]);
}
}
class MyCard extends StatelessWidget {
final String route;
final String title;
MyCard({this.route, this.title});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () => Navigator.pushNamed(context, this.route),
child: Card(
child: Center(child: Text(this.title)),
),
);
}
}