如何在flutter中导航到特定类别索引号

ugmeyewa  于 2023-01-14  发布在  Flutter
关注(0)|答案(3)|浏览(172)

我有一个页面/屏幕CountryNameScreen此屏幕有这样的国家列表。

var countries = [
      'Australia',
      'NewZeland',
      'United State',
      'Russia',
      'United Kingdom',
      'India',
    ];

上述国家/地区有一个onTap功能。当我们点击国家/地区时,屏幕上会显示详细信息页面。

问题是:我想从此应用程序其他页面导航到索引2上的“United State”

onPressed: () {
                  Navigator.push(
                    context,
                    CupertinoPageRoute(
                      builder: ((context) =>
                          const CountryNameScreen()),
                    ),
                  );
                },

我应该写什么,而添加导航代码。

rta7y2nd

rta7y2nd1#

这个问题解释得很不清楚。请尝试添加更详细的信息或解释。
如果你想动态地访问某个国家/地区的页面,尝试添加一些构造函数参数,如下所示:国家/地区名称屏幕(国家/地区名称:索引编号)
并使用变量(例如:indexNumber)将indexNumber值设置为数组中的值。

lztngnrs

lztngnrs2#

因此,您需要发送一个索引,以便屏幕能够显示您的国家名称EX:对于纽约指数2
在CountryNameScreen内部,需要为此索引添加一个属性,然后将该属性添加到类的构造函数中

const CountryNameScreen({Key? key, required this.index}) : super(key: key);

final int index;

然后,从您想要导航到该屏幕的位置,您可以通过传递如下变量来实现:

onTap: () => Navigator.push(
                    context,
                    CupertinoPageRoute(
                      builder: ((context) {
                        return CountryNameScreen(
                            index: 2, //country's index
                          );
                      }),
                    ),
                  )

如果您希望在列表中显示国家/地区并动态获取该国家/地区,可以使用以下代码并根据需要编辑内部小部件

ListView.separated(
            itemBuilder: (context, index) => InkWell(
                  onTap: () => Navigator.push(
                    context,
                    CupertinoPageRoute(
                      builder: ((context) {
                        return CountryNameScreen(
                            index: index,
                          );
                      }),
                    ),
                  ),
                  child: Center(
                    child: Text(
                      countries[index],
                    ),
                  ),
                ),
            separatorBuilder: (context, _) => const SizedBox(
                  height: 10,
                ),
            itemCount: countries.length)

希望能有所帮助

koaltpgm

koaltpgm3#

尝试下面的代码我已经尝试了你的预期结果,当你点击国家名称跳转到选定的国家名称页面。

您的国家/地区列表:

var countries = [
    'Australia',
    'NewZeland',
    'United State',
    'Russia',
    'United Kingdom',
    'India',
  ];

您的列表显示小工具:

ListView.builder(
  itemCount: countries.length,
  itemBuilder: (context, index) {
    return ListTile(
      onTap: () {
        Navigator.push(
          context,
          CupertinoPageRoute(
            builder: (context) => CountryNameScreen(
              countryName: countries[index].toString(),
            ),
          ),
        );
      },
      title: Text(
        countries[index].toString(),
      ),
    );
  },
),

国家/地区名称屏幕小工具:

class CountryNameScreen extends StatelessWidget {
  const CountryNameScreen({required this.countryName});
  final String countryName;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(countryName),
      ),
      body: Center(
        child: Text(
          'Selected Country - $countryName',
          style: const TextStyle(
            fontSize: 30,
          ),
        ),
      ),
    );
  }
}

完整示例

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  var countries = [
    'Australia',
    'NewZeland',
    'United State',
    'Russia',
    'United Kingdom',
    'India',
  ];
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: countries.length,
      itemBuilder: (context, index) {
        return ListTile(
          onTap: () {
            Navigator.push(
              context,
              CupertinoPageRoute(
                builder: (context) => CountryNameScreen(
                  countryName: countries[index].toString(),
                ),
              ),
            );
          },
          title: Text(
            countries[index].toString(),
          ),
        );
      },
    );
  }
}

class CountryNameScreen extends StatelessWidget {
  const CountryNameScreen({required this.countryName});
  final String countryName;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(countryName),
      ),
      body: Center(
        child: Text(
          'Selected Country - $countryName',
          style: const TextStyle(
            fontSize: 30,
          ),
        ),
      ),
    );
  }
}

国家名称结果-〉x1c 0d1x
选择澳大利亚国家结果-

选择美国国家结果-

相关问题