将数据构建回 ListView Builder [Flutter]

Question

现有代码显示不同兴趣的按钮列表。用户可以点击 select 他们喜欢的兴趣。

但是，如果用户事先已经 select 编辑了他们的兴趣并返回到此页面，则让用户再次从新鲜状态进行选择是不合逻辑的。

我想重新填充用户之前选择的内容并在屏幕上反映为所选择的内容（= widget.viewInterest.isChosen）。容器的颜色将为 Color(0xff0B84FE)，文本的颜色为 Colors.yellow，如下面的代码所示。

假设用户选择了这个列表列出 UserInterests = [ “☕咖啡”， “剧院”， ];

问题：如何使包含这些字符串的容器为真值（即 widget.viewInterest.isChosen），类似于用户点击相应按钮时的情况？

附件是截断代码：


final List<String> artsInterests = [
  " Photography",
  " Theaters",
  "️ Exhibitions",
  " Architecture",
  "‍ Cooking",
  "☕ Coffee",
  "️ Design",
  " Fashion",
  " Reading",
  " Dance",
  " Pottery",
  " Drawing",
  " Beauty",
  " Journalling",
];

StatelessWidget shortened

  final List<String> artsInterests;

 shortened
              child: ListView.builder(
                  shrinkWrap: true,
                  scrollDirection: Axis.horizontal,
                  padding: const EdgeInsets.all(1),
                  itemCount: artsInterests.length
                  itemBuilder: (context, int index) {
                    return Interests2(AvailableInterestChosen(
                      artsInterests[index],
                      isChosen: false,
                    ));
                brackets...
child: ListView.builder(
                  shrinkWrap: true,
                  scrollDirection: Axis.horizontal,
                  padding: const EdgeInsets.all(1),
                  itemCount: artsInterests.length - 7,
                  itemBuilder: (context, int index) {
                    return Interests2(AvailableInterestChosen(
                      artsInterests[7 + index],
                      isChosen: userChosenInterests
                          .contains(artsInterests[7 + index]),
                    ));

closing brackets...

List<String> chosenArtsInterests = [];

List<String> UserInterests = [
   "☕ Coffee",
  " Theaters",
];

class Interests2 extends StatefulWidget {
  final AvailableInterestChosen viewInterest;

  Interests2(this.viewInterest);

  String id = 'Interests2';

  @override
  Interests2State createState() => Interests2State();
}

class Interests2State extends State<Interests2> {
  @override
  Widget build(BuildContext context) {
    final height = MediaQuery.of(context).size.height;
    final width = MediaQuery.of(context).size.width;
    Container container = Container(

       decoration shortened

        decoration: BoxDecoration(
          color: widget.viewInterest.isChosen && chosenInterests.length < 9
              ? Color(0xff0B84FE)
              : Colors.white.withOpacity(0.87),
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.69),
              spreadRadius: 1,
              blurRadius: 3,
              offset: Offset(0, 1), // changes position of shadow
            ),
          ],
          borderRadius: BorderRadius.circular(9),
        ),
        child: Text(
          '${widget.viewInterest.title}',
          style: TextStyle(
              fontSize: 15,
              fontWeight: FontWeight.w600,
              color: widget.viewInterest.isChosen && chosenInterests.length < 9
                  ? Colors.white
                  : Colors.black),
        ));

    if (widget.viewInterest.isChosen && chosenInterests.length < 9) {
      chosenArtsInterests.add('${widget.viewInterest.title}');
     

      print(chosenArtsInterests);
    } else {
      chosenArtsInterests.remove('${widget.viewInterest.title}');
    
      print(chosenArtsInterests);
    }
    return GestureDetector(
      onTap: () {
        setState(() {
          widget.viewInterest.isChosen = !widget.viewInterest.isChosen;
        });
      },
      child: container,
    );
  }
}

class AvailableInterestChosen {
  bool isChosen;
  String title;

  AvailableInterestChosen(this.title, {this.isChosen = false});
}

对于描绘 UI 的按钮，表明它们已被选中，我的猜测类似于

for (string i in UserInterests) setState ((){widget.viewInterest.isChosen})

但是关于将它放在哪里或确切的代码，我迷路了。如果有人有一些经验或类似的资源可以分享以便我阅读，那就太好了！

Answer 1

如何检查元素是否在 UserInterests 列表中？

这样的方法可能有用，

            AvailableInterestChosen(
                artsInterests[index],
                isChosen: UserInterests.contains(artsInterests[index]),
            )

将数据构建回 ListView Builder [Flutter]

Build Data Back to ListView Builder [Flutter]

database

listview

set

button

flutter