Flutter：TextField下方不需要的空間

我有一個問題，Flutter TextField 沒有填滿它的設定高度。藍色 Container 顯示 TextField 應有的大小。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(



        body: Container(
          color: Colors.blue,
          height: 56,
          child: TextField(
            decoration: InputDecoration(
              // Sizes
              contentPadding: EdgeInsets.zero,
              constraints: const BoxConstraints(minHeight: 56),

              // Fill color
              fillColor: Colors.grey,
              filled: true,

              // Hint text
              hintText: "Password",

              // Borders
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(12),
                borderSide:
                    const BorderSide(width: 0, color: Colors.transparent),
              ),
              enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(12),
                borderSide:
                    const BorderSide(width: 0, color: Colors.transparent),
              ),
              focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(12),
                borderSide: const BorderSide(
                  width: 2,
                  color: Colors.blue,
                ),
              ),
              errorBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(12),
                borderSide: const BorderSide(
                  width: 2,
                  color: Colors.blue,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

將此代碼復制到dartpad.dev 中會發現問題。

編輯

移除容器 ( ) 的高度后，// height: 56,TextField 下方仍有一個藍色間隙。這意味著 TextField 占用了正確的高度，但 InputDecoration 沒有。

uj5u.com熱心網友回復：

如果您希望 TextField 小部件垂直擴展，您需要將其 expands 屬性設定為 true。此外，屬性 maxLines 需要設定為 null 以避免斷言失敗。正如檔案在擴展屬性上所說： https ://api.flutter.dev/flutter/material/TextField/expands.html

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Container(
          color: Colors.blue,
          height:100,
          child: TextField(
            expands: true,
            maxLines: null,
            decoration: InputDecoration(
              // Sizes
              // Fill color
              fillColor: Colors.grey,
              filled: true,

              // Hint text
              hintText: "Password",

              // Icons
              prefixIcon: const Icon(Icons.key_rounded),
              prefixIconConstraints: const BoxConstraints(
                minWidth: 24   16 * 2,
              ),
              suffixIcon: const Icon(Icons.visibility),
              suffixIconConstraints: const BoxConstraints(
                minWidth: 24   16 * 2,
              ),

              // Borders
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(12),
                borderSide:
                    const BorderSide(width: 0, color: Colors.transparent),
              ),
              enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(12),
                borderSide:
                    const BorderSide(width: 0, color: Colors.transparent),
              ),
              focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(12),
                borderSide: const BorderSide(
                  width: 2,
                  color: Colors.blue,
                ),
              ),
              errorBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(12),
                borderSide: const BorderSide(
                  width: 2,
                  color: Colors.blue,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

uj5u.com熱心網友回復：

擺脫contentPadding下InputDecoration。

瞧！

uj5u.com熱心網友回復：

我已經計算出，通過移除constraints: const BoxConstraints(minHeight: 56),并精確調整垂直方向contentPadding，我可以創建正確的高度。

這仍然有點小問題，我不明白為什么該constraints領域沒有任何影響。

我們可以通過編程計算垂直填充。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    const targetFieldHeight = 56.0;
    const fontSize = 20.0;
    const textHeight = 1.0;

    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // This represents the target height.
            Container(color: Colors.red, width: 4, height: targetFieldHeight),

            // The TextField.
            Expanded(
              child: Container(
                color: Colors.blue,
                child: TextField(
                  style: const TextStyle(fontSize: fontSize, height: textHeight),
                  decoration: InputDecoration(
                    contentPadding: const EdgeInsets.symmetric(
                      horizontal: 16,
                      vertical: (targetFieldHeight - fontSize * textHeight) / 2,
                    ),
                    

                    // Fill color
                    fillColor: Colors.grey,
                    filled: true,

                    // Hint text
                    hintText: "Password",

                    // Borders
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(12),
                      borderSide:
                          const BorderSide(width: 0, color: Colors.transparent),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在飛鏢墊上仍然存在間隙，并且通過將 4 添加到已解決的垂直內容填充中。不過，我的實際專案中不再存在差距。

標籤：扑镖文本域

上一篇：LateInitializationError：欄位“專案”尚未初始化

下一篇：如何在具有安全區域的暗模式和亮模式下抖動不同的狀態欄顏色？