Как отобразить разные названия и разные целевые страницы для каждого элемента сетки? - PullRequest
Новая
       26

Как отобразить разные названия и разные целевые страницы для каждого элемента сетки?

0 голосов
/ 15 марта 2019

Я пытаюсь создать вид элемента сетки, и каждый элемент должен иметь свой текст и свою целевую страницу. Например, элемент сетки разработки Android при нажатии должен перейти на Android Dev. Страница и элемент сетки веб-разработчика, при нажатии должны перейти на страницу веб-разработчика.

Это мой текущий экран, и я хочу, чтобы у каждого элемента сетки было другое имя. enter image description here

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()));
  }

1 Ответ

0 голосов
/ 18 марта 2019

Прежде всего, я бы предложил использовать конструктор GridView по умолчанию вместо GridView.builder. Вы можете просто добавить карты с настроенными названиями и маршрутами к нему. В этом примере я использую разные маршруты для разных конечных видов.

Другим решением было бы передать параметр в маршрут и изменить представление на основе параметра. Если это подходящее решение для вашей проблемы, оставьте комментарий, и я отредактирую этот ответ, чтобы привести пример.

Автономный пример (без следующих представлений):

GridView Demo

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)),
      ),
    );
  }
}
...