将列表数据反射回UI[颤动] [英] Reflect List Data Back Into UI [Flutter]

问题描述

简而言之，用户可以在入职过程中选择自己的兴趣，更改UI并将兴趣添加到列表中。

当用户导航到另一个页面(即设置)时，如何选择所选兴趣(bool isChosen=true)？.然后用户可以从那里再次更新他们的兴趣？

感谢任何指导，谢谢！

附件是我对感兴趣的特定主题的截断代码，所有主题都有相同的代码，只是列表不同。

假设我的数据包含[&Quot；🏡Home-Body&Quot；，&Quot；🏃‍♀️Running&Quot；，&Quot；🧘🏻‍♀️Yoga&Quot；，&Quot；🎭Theaters&Quot；，&Quot；😸动画&；Manga&Quot；，]的列表。

如何才能使此选定列表的泡沫UI显示为bool isChosen(与其他深色列表相比，它是黄色的)？下面哪些用户可以再次选择和取消选择？

final List<String> artsInterests = [
  blah blah blah
];


class ArtsInterests extends StatelessWidget {
  const ArtsInterests({
    Key key,
    @required this.artsInterests,
  }) : super(key: key);

  final List<String> artsInterests;

  @override
  Widget build(BuildContext context) {
final height = MediaQuery.size.height;
final width = MediaQuery.size.width;

    return Column(children: [
      Container(
        margin: EdgeInsets.only(
            left: width * 0.045,
            top: height * 0.033),
        child: Align(
            alignment: Alignment.centerLeft,
            child: Text(
              '🎨 Arts',
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 21),
            )),
      ),
      Column(
        children: [
          Padding(
            padding: EdgeInsets.only(
                left: width * 0.03,
                top: height * 0.012),
            child: Container(
              width: width,
              height: height * 0.045,
              child: ListView.builder(
                  shrinkWrap: true,
                  scrollDirection: Axis.horizontal,
                  padding: const EdgeInsets.all(1),
                  itemCount: 7,
                  itemBuilder: (context, int index) {
                    return Interests2(AvailableInterestChosen(
                      artsInterests[index],
                      isChosen: false,
                    ));
                  }),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(
                left: width * 0.03,
                top: height * 0.003),
            child: Container(
              width: width,
              height: height * 0.045,
              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: false,
                    ));
                  }),
            ),
          ),
        ],
      ),
    ]);
  }
}

List<String> chosenInterests = [ "🏡 Home-body",  "🏃‍♀️ Running", "🧘🏻‍♀️ Yoga",  "🎭 Theaters",  "😸 Anime & Manga",];

List<String> chosenArtsInterests = [];

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.size.height;
final width = MediaQuery.size.width;
    Container container = Container(
        height: height * 0.03,
        padding: EdgeInsets.symmetric(
            horizontal: width * 0.027,
            vertical:height * 0.003),
        // padding: EdgeInsets.fromLTRB(12, 6, 12, 6),
        margin: EdgeInsets.fromLTRB(
          width * 0.012,
          height * 0.003,
          width * 0.012,
          height * 0.003),
        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}');
      var chosenInterests = chosenSportsInterests +
          chosenEntertainmentInterests +
          chosenCharacterInterests +
          chosenArtsInterests +
          chosenWellnessInterests +
          chosenLanguageInterests;

      print(chosenInterests);
    } else {
      chosenArtsInterests.remove('${widget.viewInterest.title}');
      var chosenInterests = chosenSportsInterests +
          chosenEntertainmentInterests +
          chosenCharacterInterests +
          chosenArtsInterests +
          chosenWellnessInterests +
          chosenLanguageInterests;

      print(chosenInterests);
    }
    return GestureDetector(
      onTap: () {
        setState(() {
          widget.viewInterest.isChosen = !widget.viewInterest.isChosen;
        });
      },
      child: container,
    );
  }
}

class AvailableInterestChosen {
  bool isChosen;
  String title;

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

推荐答案

您可以将值作为参数传递给另一个小部件，但在本例中这是不可能的，因为值太多了。您必须使用状态管理解决方案。对于Starter，您可以使用provider

这篇关于将列表数据反射回UI[颤动]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！