将数据构建回ListView生成器[颤动] [英] Build Data Back to ListView Builder [Flutter]

问题描述

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

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

我想重新填充用户以前选择的内容，并在屏幕上反映出所选择的内容(it=widget.viewInterest.isChosen)。容器的颜色为颜色(0xff0B84FE)，&；文本的颜色为颜色。黄色，如下面的代码所示。

假设用户已选择此列表 列出用户兴趣=[ ☕咖啡， 🎭影院&， ]；

问题：如何让包含这些字符串的容器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});
}

对于用于描述其被选中的用户界面的按钮，我的猜测类似于

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

但关于将它放在哪里或确切的代码，我感到困惑。如果有人有一些经验或类似的资源可以分享，这样我就可以阅读了，那将是很棒的！

推荐答案

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

这样的事情可能会奏效

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

这篇关于将数据构建回ListView生成器[颤动]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！