如何僅對 Flutter 中的 TextField 中的文本應用填充？

Question

沒有填充我得到這個結果：

有了這樣的東西

Padding(padding: EdgeInsets.all(20.0), child: TextField())

我得到以下結果：

可能有點難看，但你只要看看邊緣的紅色徽章就能明白我的意思。

我只想用我的填充移動文本，但實際上整個TextField都應用了填充，即下划線隨着填充移動，但我希望在整個視圖中仍然有下划線 go，只有TextField中的文本受填充影響。

Answer 1

將填充應用於TextField的內容。 您可以申請

ItemDecoration 的 contentPadding 屬性位於 TextField 的裝飾屬性。

像這樣：

TextField(
  textAlign: TextAlign.left,
  decoration: InputDecoration(
    hintText: 'Enter Something',
    contentPadding: EdgeInsets.all(20.0),
  ),
)

Answer 2

對我有用：

TextFormField(
  decoration: InputDecoration(
    border: InputBorder.none,
    contentPadding: EdgeInsets.symmetric(vertical: 10), //Change this value to custom as you like
    isDense: true, // and add this line
    hintText: 'User Name',
    hintStyle: TextStyle(
        color: Color(0xFFF00),
  )),
  keyboardType: TextInputType.text,
  style: TextStyle(
      color: Color(0xFFF00),
      fontSize: 14),
  maxLines: 1,
)

Answer 3

如果您想對 TextField 內文本的每一側應用不均勻的垂直填充，您必須首先將 textAlignVertical 設置為 TextAlignVertical.top。

如果不這樣做，最大的頂部/底部填充將同時應用於文本的頂部和底部。 我猜這是因為 TextField 文本總是水平居中。

TextField(
        controller: model.captionController,
        maxLines: null,
        minLines: 8,
        maxLength: 200,
        textAlignVertical: TextAlignVertical.top,
        decoration: PostFilledField('Add a caption...').copyWith(
          contentPadding: EdgeInsets.fromLTRB( 8, 0,  8, 90.0),
          isDense: true
        ),
        style: PostSmallText(),
      ),

Answer 4

如果您在 Column/Row 小部件中創建 TextField 作為子部件，如果您在根 Widget 中將 padding/content padding 設置為文本字段，則它可能無法工作。

確保始終使用InputDecoration根據您在 TextField 級別的要求設置內容填充

這是為 TextField 內容設置填充的簡單片段

TextField(
  decoration: InputDecoration(
    hintText: 'Title', 
    contentPadding: EdgeInsets.all(8)),
    keyboardType: TextInputType.phone,
 )

結果：