Flutter 中文本字段的大纲输入边框问题

Question

我使用了 OutlinedInput 边框装饰，但是当增加 labelText 和轮廓边框之间的borderRadius 空间时，也会增加 plz 帮助，因为我是 Flutter 的初学者。

图片链接： https://drive.google.com/drive/folders/1037ezMhxWYjPY7IfMv4w-nxaaE7c_HAN?usp=sharing

这是我的代码：

TextField(
              decoration: InputDecoration(
                  fillColor: Colors.white,
                  filled: true,
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(45),
                    borderSide: BorderSide(color: Colors.grey),
                  ),
                  labelText: 'Email',
                 ),
            ),

Answer 1

首先，尝试改用 TextFormField。 它具有比表单中的 TextField 更好的验证和其他选项。

https://api.flutter.dev/flutter/material/TextFormField-class.html

label 有自己的边框，这些边框也受您的borderRadius 值的影响。 尝试使用 BorderRadius.only()，而不是使用 BorderRadius.circular。

TextFormField(
   decoration: InputDecoration(
                  fillColor: Colors.white,
                  filled: true,
                  border: OutlineInputBorder(
                    borderRadius:  BorderRadius.only(
                                    topLeft: Radius.circular(5),
                                    topRight:  Radius.circular(45),
                                    bottomLeft:  Radius.circular(45),
                                    bottomRight:  Radius.circular(45),
                              ),,
                    borderSide: BorderSide(color: Colors.grey),
                  ),
                  labelText: 'Email',
                 ),
),

这将允许您在 4 个角中的 3 个角上保持药丸形状。 您的 topLeft 将需要根据您的喜好进行调整。