如何将导航添加到 Flutter 中的元素列表

Question

我有模型 Class 叫做 Categories

class Categories {  //Categories class
  final String route;
  final String categoryName;
  final String categorySubTitle;
  Categories({this.route, this.categoryName, this.categorySubTitle});
}

然后我创建了一个列表，其中放置了我创建的 class 的所有对象。

List<Categories> categories = [tarocchi, sogni]; //List of categories

final Categories tarocchi = Categories(
  route: '/tarocchi',
  categoryName: 'Tarocchi e Divinazione',
  categorySubTitle: 'L’antica arte dei Tarocchi e della Divinazione',
);
final Categories sogni = Categories(
  route: '/sogni',
  categoryName: 'Interpretazione dei Sogni',
  categorySubTitle: 'Significato e interpretazione dei Sogni',
);

列表中的每一项都必须转到不同的屏幕。在我生成的列表中，将有一个将推送到不同屏幕的 onTap 函数：

ListView.builder(
        itemCount: categories.length,
        itemBuilder: (context, index) {
          return Column(
            children: [
              GestureDetector(
                onTap: () => Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => Text(categories[index].categorySubTitle)
                      // here I call the new screens according with screens in the List
                      ),
                ),
                child: Card(
                  child: Text(categories[index].categoryName),
                ),
              )
            ],
          );
        },
      ),

Answer 1

您应该使用 Named Route。您应该为所有屏幕创建名称路由例子：在 MaterialApp

MaterialApp(
  title: 'My App',
  initialRoute: '/home',
  routes: {'home': (BuildContext context) => HomeScreen(),
            'settings': (BuildContext context) => SettingsScreen(),
    },
 ),

在你的 ListViewBuilder 中改变你的 onTap 像这样

() => Navigator.pushNamed(context, 'home'); // 'home' should be same as key that you give in `routes` in `MaterialApp`

这将解决问题。

像这样创建 category 数组，

final Categories tarocchi = Categories(
    id: 1,
    categoryName: 'Tarocchi e Divinazione',
    categoryImage: 'assets/images/tarot.jpg',
    categorySubTitle: 'L’antica arte dei Tarocchi e della Divinazione',
    categoryDescription: 'L’antica arte dei Tarocchi e della Divinazione',
    categoryRoute: 'home'

);
final Categories sogni = Categories(
    id: 2,
    categoryName: 'Interpretazione dei Sogni',
    categoryImage: 'assets/images/dreams.jpg',
    categorySubTitle: 'Significato e interpretazione dei Sogni',
    categoryDescription: 'Significato e interpretazione dei Sogni'
    categoryRoute: 'settings'

);

List<Categories> categories = [tarocchi, sogni,aromaterapia,cristalloterapia,naturopatia,ascolto,sciamanesimo,regressioni];

Answer 2

试试这个：

import 'package:flutter/material.dart';
void main() => runApp(MyApp()); // main function 

class MyApp extends StatelessWidget {  // MyApp class
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      initialRoute: '/home',
      routes: {
        '/home': (context) => Home(),
        categories[0].route: (context) => Scaffold(
            appBar: AppBar(title: Text(categories[0].categoryName)),
            body: Text(categories[0].categorySubTitle)),  //first route
        categories[1].route: (context) => Scaffold(
            appBar: AppBar(title: Text(categories[1].categoryName)),
            body: Text(categories[1].categorySubTitle)),  // second route
      },
    //Here to simplify things, you can create a variable of type Map<String,
    // Widget Function(BuildContext)> and then assign it to route
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Material App Bar'),
      ),
      body: ListView.builder(
        itemCount: categories.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(categories[index].categoryName),
            subtitle: Text(categories[index].categoryName),
            onTap: () =>
                Navigator.pushNamed(context , categories[index].route),
          );
        },
      ),
    );
  }
}

class Categories {  //Categories class
  final String route;
  final String categoryName;
  final String categorySubTitle;
  Categories({this.route, this.categoryName, this.categorySubTitle});
}

final Categories tarocchi = Categories(
  route: '/tarocchi',
  categoryName: 'Tarocchi e Divinazione',
  categorySubTitle: 'L’antica arte dei Tarocchi e della Divinazione',
);
final Categories sogni = Categories(
  route: '/sogni',
  categoryName: 'Interpretazione dei Sogni',
  categorySubTitle: 'Significato e interpretazione dei Sogni',
);

List<Categories> categories = [tarocchi, sogni]; //List of categories

I think this is what you're looking for. You can use that as a basis for the rest.

如何将导航添加到 Flutter 中的元素列表

How to add Navigation to a List of elements in Flutter

navigation

listview

dart

flutter