java - 我如何将保存的项目添加到 Flutter 中的 Collection 夹部分？

Question

我目前正在学习 flutter 和 dart。我搜索了但没找到。

我想在列表中的名字旁边放置一个 Collection 夹按钮 和 单击它时，我只想让它对另一页上的 Collection 夹进行排序。

这是我的代码:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());


class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  AnaEkran createState() => AnaEkran();
}


class AnaEkran extends State<HomeScreen> {
  static List<String> mainDataList = [
    "Apple",
    "Apricot",
    "Banana",
    "Blackberry",
    "Coconut",
    "Date",
    "Fig",
    "Gooseberry",
    "Grapes",
    "Lemon",
    "Litchi",
    "Mango",
    "Orange",
    "Papaya",
    "Peach",
    "Pineapple",
    "Pomegranate",
    "Starfruit"
  ];
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
          appBar: AppBar(
            title: Text('NickName Generator'),
            backgroundColor: Colors.deepPurple,
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.article_rounded)),
                Tab(icon: Icon(Icons.favorite)),
              ],
            ),
          ),
          body: ListView.builder(
            itemCount: mainDataList.length,
            itemBuilder: (context, index) {
           return Card (
             child: Padding(
             padding: const EdgeInsets.all(20.0),
                child: Text(mainDataList[index],style: TextStyle(fontSize: 19.0),),

             ),

        );
       },
      ),
    ),
    );
  }
}

这就是它的样子。相同的列表出现在第二页上，但我只想将最喜欢的单词添加到那里。

first screen

second screen

Answer 1

我将尝试解释每个必需的步骤，请耐心等待。

首先，您必须创建一个新列表，这将是最喜欢的字符串列表

  List<String> mainDataList = [
    "Apple",
    "Apricot",
    "Banana",
    "Blackberry",
    "Coconut",
    "Date",
    "Fig",
    "Gooseberry",
    "Grapes",
    "Lemon",
    "Litchi",
    "Mango",
    "Orange",
    "Papaya",
    "Peach",
    "Pineapple",
    "Pomegranate",
    "Starfruit"
  ];

  List<String> favoriteDataList = [];

现在，作为脚手架的主体，您必须添加一个 TabBarView 小部件，其中包含一个小部件列表。此列表中的小部件数量必须与您在 TabBar 中添加的选项卡数量相匹配，因为无论何时点击其中的一个选项卡，它都会移动到与索引匹配的 TabBarView 小部件。

所以你的 Scaffold 的 body 应该看起来像这样:

TabBarView(
      children: [
        ListView.builder(
          itemCount: mainDataList.length,
          itemBuilder: (context, index) {
            return Card(
              child: Row(
                children: [
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.all(20.0),
                      child: Text(
                        mainDataList[index],
                        style: const TextStyle(fontSize: 19.0),
                      ),
                    ),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      setState(() {
                        favoriteDataList.add(mainDataList[index]);
                      });
                    },
                    style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all<Color>(
                        Colors.deepPurple,
                      ),
                    ),
                    child: const Icon(
                      Icons.favorite,
                      color: Colors.white,
                    ),
                  ),
                ],
              ),
            );
          },
        ),
        favoriteDataList.isEmpty
            ? const Center(
                child: Text(
                  'There are no favorites yet!',
                  style: TextStyle(color: Colors.black),
                ),
              )
            : ListView.builder(
                itemCount: favoriteDataList.length,
                itemBuilder: (context, index) {
                  return Card(
                    child: Row(
                      children: [
                        Expanded(
                          child: Padding(
                            padding: const EdgeInsets.all(20.0),
                            child: Text(
                              favoriteDataList[index],
                              style: const TextStyle(fontSize: 19.0),
                            ),
                          ),
                        ),
                        ElevatedButton(
                          onPressed: () {
                            setState(() {
                              favoriteDataList
                                  .remove(favoriteDataList[index]);
                            });
                          },
                          style: ButtonStyle(
                            backgroundColor:
                                MaterialStateProperty.all<Color>(
                              Colors.deepPurple,
                            ),
                          ),
                          child: const Icon(
                            Icons.remove,
                            color: Colors.white,
                          ),
                        ),
                      ],
                    ),
                  );
                },
              ),
      ],
    ),

当然，那里有很多代码，我将把它分成几部分来更好地解释它。 如您所见，首先我们在 TabBarView 的子项中有两个 Widget，第一个是您拥有的那个，有一些不同，因为我添加了一个 Row 并在其中添加了一个 ElevatedButton，它将处理将所需元素添加到 Collection 夹列表:

ElevatedButton(
    onPressed: () {
        setState(() {
        favoriteDataList.add(mainDataList[index]);
        });
    },
    style: ButtonStyle(
        backgroundColor: MaterialStateProperty.all<Color>(
        Colors.deepPurple,
        ),
    ),
    child: const Icon(
        Icons.favorite,
        color: Colors.white,
    ),
),

所以，这个按钮的重要部分是 onPressed 方法，因为你已经构建了一个 StatefulWidget，我们可以知道状态已经改变，使用 setState 方法，它接收一个函数。你为什么需要这个？因为，您需要一种方式来表明状态已更改的 UI，因此它必须重建。 例如，在 StatelessWidget 中，您没有 setState 方法，因此如果不使用某些特定的 Widget 或某些特定的状态管理解决方案(如 BLoC)，您将无法更新 UI。 现在，当用户按下这个 Collection 夹按钮时，我们将把所选项目从 mainDataList 添加到 favoriteDataList，利用我们刚刚按下的元素的索引。正如我之前提到的，由于状态已更改，UI 将重新构建，因此当您点击最喜欢的选项卡时，您将看到所选项目已被添加。

第二个选项卡 View 中的 ElevatedButton 有一些小差异

ElevatedButton(
    onPressed: () {
    setState(() {
        favoriteDataList
            .remove(favoriteDataList[index]);
    });
    },
    style: ButtonStyle(
    backgroundColor:
        MaterialStateProperty.all<Color>(
        Colors.deepPurple,
    ),
    ),
    child: const Icon(
    Icons.remove,
    color: Colors.white,
    ),
),

除了不同的图标外，我们不想添加元素，而是要删除它们，因此每当我们按下按钮时，位于同一索引中的项目将从 Collection 夹数据列表中删除。

如果 favoriteDataList 不是，我还使用了三元运算符来显示小部件:

favoriteDataList.isEmpty
    ? const Center(
        child: Text(
            'There are no favorites yet!',
            style: TextStyle(color: Colors.black),
        ),
        )
    : ListView.builder(

如果为空，我们显示中心...如果不是，则显示 ListView...

差不多就这些了，当然还有一些可以改进的代码，例如，如果您多次点击第一个选项卡中的同一项目，它将多次添加到 Collection 夹列表中。但我认为该示例有效，您将能够使用它并修复它!

很抱歉发了这么长的帖子，希望对您有所帮助!