如何在Flutter中增加文本字段标签的大小（宽度）？

Question

有没有办法在Flutter中增加文本字段标签的宽度，以避免省略号（...）的出现？

标签总是比文本字段区域小。

我所想到的改善方法只有减少内容的"start"和"end"填充，但效果很小。

                  child: TextField(
                    decoration: InputDecoration(
                        labelText: "em Dólares",
                        labelStyle: TextStyle(color: Colors.amber[600],
                            fontStyle: FontStyle.italic),
                        border: OutlineInputBorder(),
                        fillColor: Colors.black12,
                        filled: true,
                        contentPadding: EdgeInsetsDirectional.only(top: 20.0, bottom: 20.0, start: 5.0, end: 5.0),  //<-- weak solution
                        prefixText: "US\$"),
                    style: TextStyle(color: Colors.amber[600], fontSize: 20.0),
                  )

PS：我在上面的代码中隐藏了一些文本字段中不必要的属性，如控制器、输入格式化程序和键盘类型。

- Fellipe Sanches

Answer 1

我认为你可以修改你的floatingLabelStyle和floatingLabelAlignment（而不是labelStyle）：

        TextField(
            style: TextStyle(
              color: Colors.grey,
              fontWeight: FontWeight.bold,
            ),
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              labelText: 'I am a very long text string yes I am',
              prefixText: "US\$",
              floatingLabelAlignment: FloatingLabelAlignment.start,
              floatingLabelStyle: TextStyle(
                color: Colors.green,
                fontSize: 16,
              ),
            ),
          ),

- jurgenizer

Answer 2

使用labelStyle中的fontSize属性缩小标签文本的字体大小。如果标签文本超过文本字段大小的一半，Flutter将显示省略号（我在文档中找不到这个问题，但我自己处理过这个问题）。

  child: TextField(
                    decoration: InputDecoration(
                        labelText: "em Dólares",
                        labelStyle: TextStyle(color: Colors.amber[600],
                            fontStyle: FontStyle.italic, fontSize: 10),
                        border: OutlineInputBorder(),
                        fillColor: Colors.black12,
                        filled: true,
                        contentPadding: EdgeInsetsDirectional.only(top: 20.0, bottom: 20.0, start: 5.0, end: 5.0),  //<-- weak solution
                        prefixText: "US\$"),
                    style: TextStyle(color: Colors.amber[600], fontSize: 20.0),
                  )

- TarHalda

Answer 3

要改变（减小/增大）标签的字体大小，可以使用TextStyle（）中的fontSize：属性。只需将字体大小添加到标签即可。

- Amol Gangadhare

---

是的，我已经使用了。问题不在于字体大小，而在于字段标签的大小。谢谢。 - Fellipe Sanches

你可以在容器内使用 TextField 并将容器的高度和宽度设置为所需大小。 - Amol Gangadhare