Flutter - 聚焦与不聚焦时，TextField 提示文本填充不同于输入文本

Question

如果您仔细查看这两张图片，您会注意到默认文本提示（“输入搜索词”）比单击 TextField 后成为焦点时更靠近 TextField 的底部。

我已经尝试修改 contentPadding，这是我能够让它们匹配的最接近的。 但是，它仍然有点偏离，我不想让 TextField 不必要地高，以使差异不那么明显。

1. 为什么聚焦与不聚焦时文本不在同一垂直 position 中？
2. 我如何让它们匹配？

这是我的小部件代码：

import 'package:Shrine/colors.dart';
import 'package:flutter/material.dart';
import 'package:meta/meta.dart';
import 'search_model.dart';
import 'package:provider/provider.dart';

class Search extends StatelessWidget with ChangeNotifier {
  Search();

  @override
  Widget build(BuildContext context) {
    return Column(children: <Widget>[
      Consumer<SearchModel>(builder: (context, searchModel, child) {
        return IconButton(
          icon: Icon(
            Icons.search,
            semanticLabel: 'search',
          ),
          onPressed: () {
            // Open dialog box with InputField.
            searchModel.toggleVisibility();
          },
        );
      }),
      Consumer<SearchModel>(builder: (context, searchModel, child) {
        return AnimatedOpacity(
            opacity: searchModel.isVisible ? 1.0 : 0.0,
            duration: Duration(milliseconds: 500),
            child: Container(
                width: 190.0,
                height: 25.0,
                //color: Colors.green,
                child: TextField(
                    decoration: InputDecoration(
                      filled: true,
                      fillColor: kShrinePink300,
                      hintText: 'Enter a search term',
                      contentPadding: const EdgeInsets.only(
                          left: 14.0, bottom: 8.0, top: 2.0),
                      focusedBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.black),
                        borderRadius: BorderRadius.circular(25.7),
                      ),
                      enabledBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Colors.white),
                        borderRadius: BorderRadius.circular(25.7),
                      ),
                    ),
                    onChanged: (text) {
                      searchModel.updateText(text);
                      //onChange(text);
                      print('AnimatedOpacity changed');
                    })));
      })
    ]);
  }
}

Answer 1

要解决此问题，请将OutlineInputBorder用于enabledBorder

您遇到了这个问题，因为您将enabledBorder设置为UnderlineInputBorder并且文本不适合（具有下划线、文本和填充）。

也将填充更改为这样的东西

contentPadding: const EdgeInsets.fromLTRB(8.0, 0.0, 8.0, 0.0),

限制字段高度不是一个好主意。 移动设备的最小可点击区域应该在 40-44 点左右（大手指的人很难点击它，特别是如果你的列有多个 TextField）。