database - 将列表数据反射回 UI [Flutter]

问题描述

简而言之，用户可以在引导过程中选择他们的兴趣，UI 更改并将兴趣添加到列表中。

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

任何指导表示赞赏，谢谢！

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

假设我的数据有一个列表 [“Home-body”、“‍♀️ Running”、“‍♀️ Yoga”、“Theatres”、“Anime & Manga”、]。

可以做些什么来使这个选定列表的气泡 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});
}

标签： databaselistflutterbackend

database - 将列表数据反射回 UI [Flutter]

问题描述

解决方案

推荐阅读