在Flutter文本字段中从上到下更改光标位置

ecfdbz9o  于 2023-01-18  发布在  Flutter
关注(0)|答案(4)|浏览(347)

我需要改变textformfield中光标的位置。我设法将光标的高度减少了1,但是光标的位置仍然在顶部。我无法将它移动到底部。
我想实现这个目标:

但我的成就是:

在Flutter里有办法做到吗?
我的代码示例

TextFormField(
  style: TextStyle(
    color: Theme.of(context).textTheme.bodySmall?.color,
    fontSize: 14,
  ),
  minLines: 1,
  maxLines: 1,
  maxLength: 300,
  cursorColor: Theme.of(context).hintColor,
  textAlignVertical: TextAlignVertical.center,
  cursorHeight: 1,
  cursorWidth: 15,
);
sz81bmfz

sz81bmfz1#

TextFormField在style中具有height属性-您可以在高度上应用0.0以实现输出。此外,从bottomtop填充中,您可以使用contentPadding,以便您可以从左上角到右下角应用或删除从光标到输入行的填充:x1c 0d1x

return Scaffold(
      appBar: AppBar(),
      body: TextFormField(
        style: TextStyle(
          color: Theme.of(context).textTheme.bodySmall?.color,
          fontSize: 26,
          height: 0.0, 
        ),
        minLines: 1,
        maxLength: 300,
        cursorColor: Theme.of(context).hintColor,
        textAlignVertical: TextAlignVertical.center,
        cursorHeight: 1,
        cursorWidth: 15,
        decoration: const InputDecoration(
            contentPadding: EdgeInsets.zero, border: InputBorder.none),
      ),
    );
xu3bshqb

xu3bshqb2#

在TextFormField高度中添加样式:0.1

TextFormField(
          style: TextStyle(
            color: Theme.of(context).textTheme.bodySmall?.color,
            fontSize: 14,
            height: 0.1, // you need to add this only
          ),
          minLines: 1,
          maxLines: 1,
          maxLength: 300,
          cursorColor: Theme.of(context).hintColor,
          textAlignVertical: TextAlignVertical.center,
          cursorHeight: 1,
          cursorWidth: 15,
        ),

对于库比蒂诺文本字段

CupertinoTextField(
          placeholder: 'search',
          style: TextStyle(
            height: 0.1,
            fontSize: 20,
          ),
          cursorHeight: 1,
          cursorWidth: 15,
        ),
oalqel3c

oalqel3c3#

我想补充rahulVFlutterAndroid的答案。

为什么会观察到这种情况?

因为,默认情况下,光标从textField的左上方开始,通过改变光标的高度,光标移动到左上方的位置。

我们如何克服这一点?

使用 height 并将其设置为0.0

body:TextFormField(
        style: TextStyle(
          /* ... */
          height: 0.0, /*  👈 This should solve your problem  */
        ),
        /* ... */
     );
wkftcu5l

wkftcu5l4#

  • 如果不将cursorHeight设置为字体的高度,当字体变大时,它将无法按预期工作。
  • 这将有助于基于动态字体的组件化
Widget build(BuildContext context) {
    var fontSize = 50.0;
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TextFormField(
            style: TextStyle(fontSize: fontSize),
            minLines: 1,
            maxLines: 1,
            maxLength: 300,
            cursorColor: Theme.of(context).hintColor,
            textAlignVertical: TextAlignVertical.center,
            cursorHeight: fontSize,
          ),
        ],
      ),
    );
  }

相关问题