Question

我正在尝试创建一个芯片，其中关闭按钮（deleteIcon）位于芯片标签（标签）的左侧。我该怎么办。

这是不想要的结果：

，我想将X移至“ Hagai”的左侧像这样：

Chip(
 deleteIcon: Icon( Icons.close, ),
 onDeleted: () {setState(() {print("bla");}); }
 label: Text("bla",),
  ),

更新：在建议答案之后，这是我的新代码（仍然有效）：

Widget build(BuildContext context) {
return Container(
  child:

  Chip(
    label: Text(
      "bla",
    ),
    avatar: InkWell(
      onTap: () {
        print("bla");
      },
      child: Icon(
        Icons.close,
      ),
    ),
  ),
);

}

Answer 1

您可以使用RawChip，Chip，并在avatar字段中输入您的删除图标。

您可以使用InkeWell或GestureDetector包装删除图标，以获取onTap事件。


RawChip(
  label: Text(
    "bla",
  ),
  avatar: InkWell(
    onTap: () {},
    child: Icon(
      Icons.close,
    ),
  ),
)

Answer 2

无法更改Chip Widget的方向。但是我们可以自定义芯片

Chip(
              label: Text(
                "bla",
              ),
              avatar: InkWell(
                onTap: () {},
                child: Icon(
                  Icons.close,
                ),
              ),
            ),

ibhavikmakwana

提供了另一个解决方案

添加

如上图所示，与每个需求相同，但是 onTap 无法正常工作我正在寻找无法正常工作的原因。

我已经创建了自定义的芯片视图，希望您可以正常使用它

Wrap(
                children: <Widget>[
                  Container(
                    padding: const EdgeInsets.fromLTRB(5.0, 5.0, 5.0, 5.0),
                    decoration: BoxDecoration(
                      color: Color(0xffDBDBDB),
                      shape: BoxShape.rectangle,
                      borderRadius: BorderRadius.circular(20.0),
                    ),
                    child: Wrap(
                      alignment: WrapAlignment.center,
                      crossAxisAlignment: WrapCrossAlignment.center,
                      runSpacing: 10,
                      children: <Widget>[
                        InkWell(
                          onTap: () {
                            print("bla");
                          },
                          child: Icon(
                            Icons.close,
                          ),
                        ),
                        Padding(padding: const EdgeInsets.all(5.0)),
                        Text(
                          "bla",
                        ),
                      ],
                    ),
                  )
                ],
              ),

在Flutter Chip Widget中，如何将deleteIcon移动到标签之前

2 个答案: