Question

我正在GridView构建器中创建原始芯片的动态列表，我希望当用户单击头像图标以从列表中删除该项目，但单击功能从未被调用时。

我尝试用InkWell或GestureDetector包装Avatar图标，并使用onTap函数我调试了代码，并在onTap内尝试了一些断点，但从未调用过，也没有咔嗒声，甚至没有从GrideView外部调用chipBuilder函数，但是仍然没有调用过onTap（）。

GridView小部件

 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)),
      );

我没有任何错误消息。

当前输出：

Answer 1

感谢KlausJokinen向我指出了此issue 39045中的问题。

此行为的原因是因为RawChip正在使用tap事件。为什么不使用   onPressed：来自RawChip

如果SelectableChipAttributes.onSelected，TappableChipAttributes.onPressed和DeletableChipAttributes.onDelete为空，则RawChip的行为就像被禁用了。

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)),
      );

Flutter Chips可点击的头像不起作用

1 个答案: