【问题标题】:Build Data Back to ListView Builder [Flutter]将数据构建回 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})

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

【问题讨论】:

    标签: database flutter listview button set


    【解决方案1】:

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

    这样的事情可能会奏效,

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

    【讨论】:

    • 你我的朋友,是一个传奇。一直想弄清楚这么简单的事情...... LOL
    • 能给我你的linkedin吗?
    • 学习愉快! linkedin.com/in/shrihari689
    猜你喜欢
    • 2022-11-16
    • 1970-01-01
    • 2021-09-04
    • 1970-01-01
    • 1970-01-01
    • 2019-11-23
    • 2020-08-25
    • 2020-07-03
    • 2019-11-25
    相关资源
    最近更新 更多