在文本字段中的 suffixText 后面显示 suffixIcon

Question

我只想在 suffixText 之后显示 suffixIcon。 现在我知道在 InputDecoration 文档中明确指出它将在 suffixIcon 之前显示 suffixText。

我想要做的是：

'*' 表示它是必填字段。

我得到这个：

有没有办法让我更改我的后缀的顺序文本字段？

我尝试使用 SizedBox 或 Container 小部件，但从未得到我想要的结果。

Answer 1

您可以使用 suffix （编辑：suffixIcon）属性并传入 Row 小部件。将这两个元素放入 Row 中，您就可以准确决定它们的显示方式。例如：

源代码：

TextField(
  decoration: InputDecoration(
    suffixIcon: Row(
      mainAxisSize: MainAxisSize.min, // <-- important
      children: const [
        Icon(Icons.visibility, color: Colors.grey),
        SizedBox(width: 4), // add a small gap
        Text('*'), // second element
      ],
    ),
  ),
)

Answer 2

尝试以下代码，使用row（）窗口小部件作为suffixicon

TextField(
      decoration: InputDecoration(
        suffix: Row(
          mainAxisSize: MainAxisSize.min,
          children: const [
            Icon(
              Icons.visibility,
              color: Colors.green,
            ),
            SizedBox(width: 5),
            Text(
              '*',
              style: TextStyle(
                color: Colors.red,
              ),
            ),
          ],
        ),
      ),
    ),

您的结果屏幕 - ＆gt;

Answer 3

您可以将 suffixIcon 属性修改为：

suffixIcon: Center(
                          child: Row(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: [
                              Icon(Icons.remove_red_eye),
                              Text(
                                "*",
                                style: TextStyle(color: Colors.red),
                              )
                            ],
                          ),
                        ),

此处的对齐方式对于维护非常重要。