Flutter TextField：如何在右侧添加图标

Posted 2023-02-23

【中文标题】Flutter TextField：如何在右侧添加图标

【英文标题】：Flutter TextField: How add icon in right

【发布时间】：2021-03-14 20:54:23

【问题描述】：

在 TextField 小部件的 InputDecoration 部分中，只有左侧的图标可用（我的意思是在文本字段之外没有后缀）

如何在右侧 TextField 中添加图标？

使用 Row 是另一个问题：

 body: Column(
        children: [
          Expanded(
            child: ListView(
              children: [
                Text("Hi")
              ],
            ),
          ),
          Expanded(
              child: Row(
            children: [
              TextField(
                style: TextStyle(
                  backgroundColor: Color.fromRGBO(118, 118, 128, 0.35),
                ),
                decoration: InputDecoration(
                  hintText: "Message",
                  filled: true,
                  fillColor: Color.fromRGBO(235, 235, 245, 0.6),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(15),
                  ),
                ),
              ),
            ],
          )),
        ],
      ),

【参考方案1】：

您可以创建自定义文本字段，如下代码：

Container(
          child: Row(
        children: [Flexible(child: TextField()), Icon(Icons.add)],
      )),

【讨论】：

谢谢。我知道。但请参阅我的第 2 部分问题。我无法使用 Row。它给我错误

【参考方案2】：

为什么首先需要Expanded？但如果是必须的，我认为你可以这样做：

return Scaffold(
  body: Column(
    children: [
      Expanded(
        child: ListView(
          children: [
            Text("Hi")
          ],
        ),
      ),
      Expanded(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Container(
              width: MediaQuery.of(context).size.width - 50,
              height: 35,
              child: TextField(
                style: TextStyle(
                  backgroundColor: Color.fromRGBO(118, 118, 128, 0.35),
                ),
                decoration: InputDecoration(
                  hintText: "Message",
                  filled: true,
                  fillColor: Color.fromRGBO(235, 235, 245, 0.6),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(15),
                  ),
                ),
              ),
            ),
            Icon(Icons.add_a_photo, size: 25)
          ],
        )
      ),
    ],
  ),
);

您的代码出错，因为 Textfield 需要大小。

【讨论】：

但是现在TextField 的大小是有限的，这不利于响应式设计。而且在不同的设备上看起来可能会有所不同。

【参考方案3】：

这样做：

Row(
  children: [
    Flexible(
      child: TextField(
        style: TextStyle(
          backgroundColor: Color.fromRGBO(118, 118, 128, 0.35),
        ),
        decoration: InputDecoration(
          hintText: "Message",
          filled: true,
          fillColor: Color.fromRGBO(235, 235, 245, 0.6),
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(15),
          ),
        ),
      ),
    ),
    SizedBox(width: 10.0),
    Icon(Icons.settings),
  ],
),

需要用Flexible 小部件限制TextField。 Flexible 代表 TextField，就像 MainAxisSize.min 代表 Column。

【讨论】：

它对我不起作用。bcs 我在列中使用 Expandad

它之所以有效，是因为它使用文本字段和图标创建行。 Yoy 只需 tweek 代码即可使用 Expanded/Flexible。

@nimanima ，我已经修复了代码。现在工作。