将数据构建回 ListView Builder [Flutter]

Posted 2023-02-23

【中文标题】将数据构建回 ListView Builder [Flutter]

【英文标题】：Build Data Back to ListView Builder [Flutter]

【发布时间】：2021-08-14 17:15:00

【问题描述】：

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

但是，如果用户已经预先选择了他们的兴趣并返回到这个页面，那么让用户再次从一个新鲜的状态中选择是不合逻辑的。

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

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

问题：如何使包含这些字符串的容器 bool true（即 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)

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

【参考方案1】：

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

这样的事情可能会奏效，

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

【讨论】：

你我的朋友，是一个传奇。一直想弄清楚这么简单的事情...... LOL

能给我你的linkedin吗？

学习愉快！ linkedin.com/in/shrihari689