在 flutter 中禁用文本编辑字段

Question

我偶尔需要禁用 TextFormField。我找不到小部件中的标志，也找不到控制器来简单地将其设置为只读或禁用。最好的方法是什么？

Answer 1

这不是框架当前提供的功能，但您可以使用 FocusScope 来防止 TextFormField 请求焦点。

这是禁用后的样子。

（带提示文字）

（具有只读值）

这是启用后的样子。

（重点）

（无焦点）

代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home: new HomePage(),
  ));
}

class HomePage extends StatefulWidget {
  HomePageState createState() => new HomePageState();
}

class HomePageState extends State<HomePage> {

  TextEditingController _controller = new TextEditingController();
  bool _enabled = false;

  @override
  Widget build(BuildContext context) {
    ThemeData theme = Theme.of(context);
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Disabled Text'),
      ),
      floatingActionButton: new FloatingActionButton(
        child: new Icon(Icons.free_breakfast),
        onPressed: () {
          setState(() {
            _enabled = !_enabled;
          });
        }
      ),
      body: new Center(
        child: new Container(
          margin: const EdgeInsets.all(10.0),
          child: _enabled ?
          new TextFormField(controller: _controller) :
          new FocusScope(
            node: new FocusScopeNode(),
            child: new TextFormField(
              controller: _controller,
              style: theme.textTheme.subhead.copyWith(
                color: theme.disabledColor,
              ),
              decoration: new InputDecoration(
                hintText: _enabled ? 'Type something' : 'You cannot focus me',
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 2

还有另一种方法可以实现，它也不会导致 this issue。希望这可能对某人有所帮助。

创建 AlwaysDisabledFocusNode 并将其传递给 TextField 的 focusNode 属性。

class AlwaysDisabledFocusNode extends FocusNode {
  @override
  bool get hasFocus => false;
}

然后

new TextField(
    enableInteractiveSelection: false, // will disable paste operation
    focusNode: new AlwaysDisabledFocusNode(),
    ...
    ...
)

更新： TextField 现在有 enabled 属性。您可以在哪里禁用 TextField like

new TextField(
    enabled: false, 
    ...
    ...
)

注意：这也会禁用与文本输入关联的图标。

Answer 3

TextField 和 TextFormField 都有一个名为 enabled 的参数。您可以使用布尔变量来控制它。 enabled=true 表示它将充当编辑文本字段，而 enabled=false 将禁用 TextField.

Answer 4

这是另一种以某种方式禁用 TextField 但保持其功能的方法。我的意思是 onTap 用法

TextField(
    enableInteractiveSelection: false,
    onTap: () { FocusScope.of(context).requestFocus(new FocusNode()); },
)

enableInteractiveSelection

将禁用 TextField 的 selection 内容
FocusScope.of(context).requestFocus(new FocusNode());

将焦点更改为未使用的焦点节点

使用这种方式，您仍然可以触摸 TextField 但不能输入它或 select 它的内容。相信我，它有时会有用（datepicker、timepicker，...）:)

Answer 5

现在有一种方法可以禁用 TextField 和 TextFormField。参见 github here。像这样使用它：

TextField(enabled: false)

Answer 6

类似于 html

中的只读

TextField(
    enableInteractiveSelection: false,
    focusNode: FocusNode(),
)

这个可以响应onTap。

类似于 html

中的禁用

TextField(
    enable: false
)

这个不能响应onTap

Answer 7

TextFormField(
readOnly: true,
)

Answer 8

我试过使用 FocuseNode(), enabled = false 但没有用, 取而代之的是，我使用了一个名为 AbsorbPointer 的 小部件。它用于防止小部件触摸或点击，我将我的 TextFormField 或其他小部件包装在 AbsordPointer 小部件中，并提供一个参数以禁用触摸

例子

AbsorbPointer(
      absorbing: true,  //To disable from touch use false while **true** for otherwise
      child: Your WidgetsName
);

Answer 9

使用readOnly: true

TextField(
  readOnly: true,
  controller: controller,
  obscureText: obscureText,
  onChanged: (value) {
    onValueChange();
  },
  style: TextStyle(
    color: ColorResource.COLOR_292828,
    fontFamily: Font.AvenirLTProMedium.value,
    fontSize: ScreenUtil().setHeight(Size.FOURTEEN)),
    decoration: InputDecoration(
    border: InputBorder.none,
    hintText: hint,
    hintStyle: TextStyle(
      fontSize: ScreenUtil().setHeight(Size.FOURTEEN),
      color: ColorResource.COLOR_HINT,
      fontFamily: Font.AvenirLTProBook.value)),
  ),

Answer 10

我结合使用了 readOnly 和 enableInteractiveSelection 属性来在 TextField 上实现所需的行为。

TextField(
  readOnly: true,
  enableInteractiveSelection: true,
  onTap: () {
    do_something(),
  },
)

将 enableInteractiveSelection 设置为 true，它将允许 onTap() 作为正常.

Answer 11

使用readOnly:true是正确的。但是如果你仍然想关注这个文本字段，你可以按照下面的代码：

TextFormField(
  showCursor: true,//add this line
  readOnly: true
)

如果你想隐藏文本指针（光标），你需要将enableInteractiveSelection设置为false。

Answer 12

它有 enabled 键，这对我来说很好。

TextFormField(
    enabled: false,
)

Answer 13

以编程方式聚焦 TextField 时移除本机键盘（例如，在单击表情符号按钮后）：

FocusScope.of(context).requestFocus(titleFocusNode);
titleFocusNode.consumeKeyboardToken();

Answer 14

对我有用

TextField(
          readOnly: true,
         onChanged: (value) { },
        )

Answer 15

为此...TextField 有两个属性：

TextField(
          readOnly: true,
          enabled: false,
        )

1- 如果您希望禁用 TextField 键入和敲击集 [enabled: false]

2- 如果您希望禁用 only TextField 键入设置 [readOnly: true]

Answer 16

TextField
(
   enable: false
)

或者

TextFormField(
    enable: false
)

如果你使用 InputDecoration 不要忘记像这样设置 disabledBorder

TextFormField(
      enabled: false,
      decoration: InputDecoration(
        enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(10.0),
          borderSide: BorderSide(color: Colors.blue),
        ),
        disabledBorder:  OutlineInputBorder(
          borderRadius: BorderRadius.circular(10.0),
          borderSide: BorderSide(color: Colors.gray),
        ),
        filled: true,
      ),
    );

在 flutter 中禁用文本编辑字段

Disable a text edit field in flutter

textfield

dart

flutter

disable