Flutter Chips可点击头像不工作

pobjuy32  于 2022-12-14  发布在  Flutter
关注(0)|答案(1)|浏览(151)

我在GridView构建器中创建了一个原始芯片的动态列表,我希望当用户点击头像图标时,从列表中删除该项目,但从未调用过点击函数。
我尝试用InkWell或GestureDetector Package Avatar图标,并使用onTap函数。我调试了代码,并尝试在onTap内设置一些断点,但从未调用,也没有点击声音,甚至从GrideView外部调用了chipBuilder函数,但仍未调用onTap()。
网格视图小部件

GridView.builder(
                physics: NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                scrollDirection: Axis.vertical,
                itemCount: storingDataList.length,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 3,
                    childAspectRatio: 3,
                    crossAxisSpacing: 10,
                    mainAxisSpacing: 8),
                itemBuilder: (context, index) => chipBuilder(
                    label: storingDataList[index],
                    onAvatarTap: () {
                      Toaster.create("Item removed", context);
                      setState(() {
                       storingDataList.removeAt(index);
                     });       
             }));

芯片构建器功能:

Widget chipBuilder({String label, VoidCallback onAvatarTap}) => RawChip(
        avatar: InkWell(
          onTap: onAvatarTap,
          child: Container(
              decoration: BoxDecoration(
                  color: Colours.colorTextPrimary,
                  borderRadius: BorderRadius.circular(12)),
              child:  Icon(
                  Icons.close,
                  color: Colours.colorPrimary,
                ),
              ),
        ),
        backgroundColor: Colours.colorPrimary,
        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
        label: Text(label,
            style: CustomTextStyles.textSecondary.copyWith(color: Colors.white)),
        labelStyle: CustomTextStyles.textSecondary.copyWith(color: Colors.white),
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(12.0),
            side: BorderSide(color: Colours.colorPrimary, width: 0)),
      );

而且我没有任何错误信息。
当前输出:

5sxhfpxr

5sxhfpxr1#

感谢KlausJokinen为我指出了本期39045中的问题。
此行为的原因是RawChip正在使用tap事件。为什么不使用onPressed:来自原始芯片
如果可选择芯片属性.onSelected、可点击芯片属性.onPressed和可删除芯片属性.onDelete为空,则原始芯片的行为就像它被禁用一样。
https://api.flutter.dev/flutter/material/RawChip/isEnabled.html
我已经从avatar:中删除了InkWell,我把我的图标放在deleteIcon:中,而不是avatar:中,我使用onDeleted:函数调用onAvatarTap,它工作了。

Widget chipBuilder({String label, VoidCallback onAvatarTap}) => RawChip(
       onDeleted: onAvatarTap,
       deleteIcon:  Container(
         decoration: BoxDecoration(
             color: Colours.colorTextPrimary,
             borderRadius: BorderRadius.circular(12)),
         child: Icon(
           Icons.close,
           color: Colours.colorPrimary,
         ),
       ),
        backgroundColor: Colours.colorPrimary,
        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
        label: Text(label,
            style:
                CustomTextStyles.textSecondary.copyWith(color: Colors.white)),
        labelStyle:
            CustomTextStyles.textSecondary.copyWith(color: Colors.white),
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(12.0),
            side: BorderSide(color: Colours.colorPrimary, width: 0)),
      );

相关问题