Question

我正在尝试构建网格项目视图，每个项目应具有不同的文本和不同的登录页面。例如，单击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()));
  }

Answer 1

首先，我建议使用默认的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)),
      ),
    );
  }
}

如何为每个网格项目显示不同的名称和不同的登录页面？

1 个答案: