Question

我已使用icon: Icon(Icons.mail),向文本字段添加了图标，但是它显示在文本字段之外。

如何更改图标的位置，使其显示在文本字段中。

TextField：

TextField(
  decoration: InputDecoration(
    icon: Icon(Icons.mail),
  ),
),

Answer 1

您需要使用prefixIcon属性来代替icon

TextField(
  decoration: InputDecoration(prefixIcon: Icon(Icons.mail)),
)

Answer 2

PrefixIcon：

出现在prefixText之前和装饰容器中文本字段的可编辑部分。

下面的代码可以解决问题

TextField(
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.mail),
  ),
);

如果我们想对图标进行一些填充，我们可以这样做：

 prefixIcon: Padding(
          padding: const EdgeInsetsDirectional.only(start: 30.0),
          child: Icon(Icons.access_alarm), // Change this icon as per your requirement
        )

如何在文本框内添加图标

2 个答案: