底板模态下Flutter过滤器芯片问题

tzxcd3kk 于 2023-06-24 发布在 Flutter

关注(0)|答案(1)|浏览(144)

我在flutter中有一个底部列表模态，我想用它来添加和删除标签。我正在使用过滤芯片作为从预先构建的标签列表切换的方式。
我有底部的表模式工作伟大，弹出图标按钮点击.过滤器芯片显示在模式中，但当我点击它们时什么也没有发生...但如果我关闭底部的表单模式，然后重新打开它，他们看起来被选中了...

IconButton(
              icon: const Icon(Icons.add_circle),
              color: const Color(0xFF20647A),
              //show tags sheeet
              onPressed: () {
                showModalBottomSheet<void>(
                  context: context,
                  builder: (BuildContext context) {
                    return SizedBox(
                      height: MediaQuery.of(context).size.height * 0.58,
                      width: MediaQuery.of(context).size.width,
                      child:
                          //bottom sheet body
                          Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          ElevatedButton(
                            child: const Text('Close BottomSheet'),
                            onPressed: () => Navigator.pop(context),
                          ),
                          const SizedBox(height: 16),
                          Wrap(
                            spacing: 10,
                            children: tagListFull.map(
                              (category) {
                                return FilterChip(
                                  selected:
                                      selectedTags.contains(category),
                                  onSelected: (bool selected) {
                                    if (selected) {
                                      selectedTags.add(category);
                                    } else {
                                      selectedTags.remove(category);
                                    }
                                  },
                                  label: Text(category),
                                );
                              },
                            ).toList(),
                          ),
                        ],
                      ),
                    );
                  },
                );
              },
            ),

我最初的直觉是，这是一个setState问题，但是当我将set state添加到add（category）和remove（category）中时，即使关闭和重新打开底部表单模式，也根本不起作用。

flutter

来源：https://stackoverflow.com/questions/76541143/flutter-filter-chip-issues-with-bottom-sheet-modal

1条答案

按热度按时间

qc6wkl3g1#

模态底表本身不是有状态的，显示模态底表的小部件是有状态的。因此，当你调用setState时，模态底层对刚刚发生的事情一无所知。
关闭模态底部表单并重新打开然后示出更新的状态的原因是因为当模态底部表单被重新打开（即，当模态底部表单被重新打开时）。built），它只是访问当前状态，该状态自上次通过调用showModalBottomSheet构建模态底部表单以来已被修改。
你可以用很多方法来解决这个问题。我将向您展示一种允许模态底层过滤器芯片改变其状态的方法。
你可以实现一个有状态的小部件，它可以立即重建FilterChip：

class MyFilterChip extends StatefulWidget {
  const MyFilterChip({super.key, required this.onChanged});

  final void Function(bool) onChanged;

  @override
  State<MyFilterChip> createState() => MyFilterChipState();
}

class MyFilterChipState extends State<MyFilterChip> {
  bool _selected = false;
  bool get selected => _selected;

  @override
  Widget build(BuildContext context) {
    return FilterChip(
      label: const Text("filter 1"),
      selected: _selected,
      onSelected: (value) {
        setState(() => _selected = value);
        widget.onChanged(value);
      },
    );
  }
}

您可以使用中的onChanged回调来更新selectedTags。还有其他方法，如通知程序，但这个方法很简单。
您只需将FilterChip小部件替换为MyFilterChip小部件：

showModalBottomSheet<void>(
  context: context,
  builder: (context) {
    return SizedBox(
      height: 200.0,
        child: MyFilterChip(
          onChanged: (isSelected) {
            if (selected) {
              selectedTags.add(category);
            } else {
              selectedTags.remove(category);
            }
          },
        ),
      );
    },
  );

赞(0）回复(0）举报 2023-06-24

我来回答

底板模态下Flutter过滤器芯片问题

1条答案

相关问题

热门标签

最新问答