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 將需要根據您的喜好進行調整。