Flutter：ListView里面的CheckboxListTile跳转到顶部

Posted 2023-02-23

【中文标题】Flutter：ListView里面的CheckboxListTile跳转到顶部

【英文标题】：Flutter: CheckboxListTile inside ListView jumps to top

【发布时间】：2022-01-23 14:27:35

【问题描述】：

所以我知道关于这个问题有一些类似的问题，但没有一个对我有用。我有一个带有不同 CheckboxListTiles 的 ListView，当我向下滚动并选择一个项目时，ListView 会自动跳到顶部。有没有办法防止这种情况发生？非常感谢！ 我添加了一个屏幕截图，以便您更好地理解。 这是我的代码：

class CheckboxWidget extends StatefulWidget 
  const CheckboxWidget(
    Key key,
    this.item,
    this.type,
    this.state,
  ) : super(key: key);

  final Map<String, bool> item;
  final String type;
  final Map<String, dynamic> state;

  @override
  State<CheckboxWidget> createState() => _CheckboxWidgetState();


class _CheckboxWidgetState extends State<CheckboxWidget> 
  @override
  void initState() 
    super.initState();
    if (widget.state[widget.type].isEmpty) 
      widget.item.updateAll((key, value) => value = false);
    
  

  bool isChecked = false;

  @override
  Widget build(BuildContext context) 
    final FilterProvider filterProvider = Provider.of<FilterProvider>(context);

    return Expanded(
      child: ListView(
        key: UniqueKey(),
        children: widget.item.keys.map(
          (key) 
            return CheckboxListTile(
              contentPadding: EdgeInsets.only(left: 2, right: 2),
              title: Text(
                key,
                style: TextStyle(fontSize: 19, fontWeight: FontWeight.w400),
              ),

              value: widget.item[key],
              activeColor: Color(0xffF6BE03),
              checkColor: Color(0xff232323),
              shape: CircleBorder(),
              //contentPadding: EdgeInsets.all(0),
              onChanged: (value) 
                value
                    ? filterProvider.multifiltervalue = [widget.type, key]
                    : filterProvider.multifiltervalue = [
                        widget.type,
                        key,
                        false
                      ];
                setState(
                  () 
                    widget.item[key] = value;
                  ,
                );
              ,
            );
          ,
        ).toList(),
      ),
    );
  

【问题讨论】：

没有提供者会发生这种情况吗？

我不能离开提供者

在没有提供者的情况下，虚拟数据是否会出现此问题？你能包括你的提供者吗

【参考方案1】：

可能是因为key: UniqueKey(), 这一行当您调用setState 时，构建函数会再次构建它的小部件，而ListView 将有一个新的UniqueKey，因此它将重建列表，因为它认为它是一个不同的小部件

删除这行key: UniqueKey(),，它应该可以正常工作

【讨论】：

非常感谢！它工作:)

【参考方案2】：

CheckboxListTile 是一个无状态的 Widget...setState 正在重绘整个列表。

您可以将 CheckboxListTile 包装到 Statefull Widget 或 StatefulBuilder ...如果您在 StatefulBuilder 内调用 setState ，则仅应重绘这部分..

另一种方法是保存滚动位置...但我认为仅重绘屏幕上您已更改的部分更聪明:-)

【讨论】：

非常感谢您的回答！但它不起作用，我将 CheckboxListTile 包装在 StatefulBuilder 中。