如何从颤动的列表中获取特定信息

Posted 2023-02-23

【中文标题】如何从颤动的列表中获取特定信息

【英文标题】：how to get specific information from list in flutter

【发布时间】：2022-01-11 22:18:30

【问题描述】：

我正在开发一个由三个屏幕组成的颤振应用程序，第一个是一个列表视图小部件，我可以从列表变量中获取数据，如下所示：

这是列表视图：

 child: ListView.builder(
                    padding: EdgeInsets.only(
                      top: 10.0,
                    ),
                    itemCount: data.length,
                    itemBuilder: (context, index) 
                      final 2data =data[index];

                      return GestureDetector(
                        onTap: () 
                          Navigator.push(context, 
                              MaterialPageRoute(builder: (context) 
                            return dataSecondScreen(data: 2data,);
                          ));
                        ,

这是我定义数据的列表

final List<Data> data = [ //Data is a class
  Data(
    1, //id
    "Eli", //name
    18, //years old

    ),

 Data(
    2, //id
    "Axel", //name
    23, //years old

)]

当我按下一个列表视图项目时，它会将我重定向到另一个屏幕，它会显示列表的所有信息（取决于我之前按下的索引，我的意思是，如果我按下索引为 1 的项目，在第二个屏幕我可以看到索引为 1) 的项目的信息

这是我的问题，在第二个屏幕中，我有索引为 1 的项目的所有信息，我有一个可点击的图像，我想要这样的东西： 如果我单击该图像，我想更改具有不同索引的状态（或移动到另一个屏幕），例如，如果我在具有索引 1 的所有信息的屏幕中，我希望能够单击该图像并将索引 1 屏幕的信息更改为索引 2（或 3,4 ,5...）。那么，我如何能够从列表中选择并显示我想要的信息？

更新：

在本节中，我尝试应用 PageView 以便在页面之间移动，但是，当我向左滚动时，只会出现相同的第一项，第二项永远不会显示它

 @override
  Widget build(BuildContext context) 
    return Scaffold(
        body: Constant.main ? Init( ) : Stadis());
  

这是页面视图

 Widget Init()
    int activeIndex = 0;
    final screenHeight = MediaQuery.of(context).size.height;
    int selectedIcon = 0;
    return PageView.builder(
      itemCount: data.length,
        physics: BouncingScrollPhysics(),
      controller: _controller,
        itemBuilder: (context, index) 

          return Stack(
          alignment: Alignment.center,
          children: <Widget>[
            Column(...

【问题讨论】：

请详细说明您的问题

先生，我想知道如何根据 id（我已经定义的）选择列表的位置并将其显示在屏幕上

【参考方案1】：

我认为您想为此目的使用 Widget PageView：https://api.flutter.dev/flutter/widgets/PageView-class.html

您可以使用 PageView.builder 来遍历项目列表。

例如：

假设您的数据如下所示：

class Profile 
  final int id;
  final String name;
  final int age;

  Profile(this.id, this.name, this.age);

还有一个项目列表：

List<Profile> data = [Profile(1, "Eli", 18), Profile(2, "Axel", 23)];

然后在你页面的build方法中：

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: PageView.builder(
        itemBuilder: (context, index) 
          return Text(data[index].name);
        ,
        itemCount: data.length,
      ),
    );
  

如果向左滚动，它将转到 data[2]，如果向右滚动，它将转到 data[1]。

【讨论】：

Pageview 看起来是解决方案.. 但是我有同样的问题，我正在尝试从 Data[1] 跳转到 Data[2] 并且我无法得到它.. 你呢知道如何从 Data[1] 跳转到 Data[2] 吗？我有控制器..我定义了 currentPage.. 并且一切正常..

我不确定我是否完全理解。但是我用一个简单的例子编辑了上面的答案。它将显示 data[index].name ，具体取决于页面浏览量所在的项目。您可以返回自定义小部件而不是 Text(...) 来显示所有数据元素。

感谢您的代码，但是，它似乎对我不起作用，我更新了我的询问部分，显示了我如何应用 PageView mmm 我认为我的问题出在我的列表视图上，当我从列表视图移动到新屏幕我在列表中选择一项（我按下的一项），所以在第二个屏幕中我只有一项，这就是为什么，即使我有 PageView 我也只能移动与第一项

那么是的，您需要将单个数据元素和完整列表传递给构建 PageView 的小部件的构造函数。然而，这可能不是一个干净的方法。

mm 我打算试试看。从列表视图类，现在我正在发送单个数据和完整列表，如您在此处看到的：return dataSecondScreen(data: 2data, list:list);，所以现在 PageView 小部件的构造函数可能具有完整列表，不是吗？但是，查看我的代码，如何将该列表传递给页面视图？

【参考方案2】：

您应该使用状态管理包来管理您的状态，从而获得更好的性能和更轻松的开发。 这里有一些状态管理包可供查看：

1-https://pub.dev/packages/flutter_bloc

2-https://pub.dev/packages/provider

第一个较大，适合大型项目，第二个适合中小型项目。 尽管可以将它们中的每一个用于您的项目。