75

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

4

15 回答 15

136

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

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

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

然后

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

更新： TextField现在enabled有财产。你可以在哪里禁用TextField类似

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

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

于 2018-02-12T08:05:00.887 回答
110 
TextFormField(
readOnly: true,
)
于 2019-07-24T17:54:48.287 回答
67

TextField并且TextFormField两者都有一个名为enabled. 您可以使用布尔变量来控制它。enabled=true意味着它将充当编辑文本字段，而enabled=false将禁用TextField.

于 2018-05-29T08:00:44.473 回答
29

类似于 html 中的 readonly

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

这可以响应 onTap。

类似于 html 中的禁用

TextField(
    enable: false
)

这个不能响应onTap。

于 2019-03-20T04:18:53.420 回答
25

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

这是它被禁用时的样子。

（带提示文字） 空且只读

（带有只读值） 只读

这是启用后的样子。

（重点） 专注

（无焦点） 可编辑

代码如下：

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',
              ),
            ),
          ),
        ),
      ),
    );
  }
}
于 2017-06-12T03:14:57.547 回答
21

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

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

  • enableInteractiveSelection

    将禁用内容选择TextField

  • FocusScope.of(context).requestFocus(new FocusNode());

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

使用这种方式，您仍然可以触摸TextField但不能输入或选择它的内容。相信我，它有时会很有用（日期选择器，时间选择器，...）:)

于 2019-01-17T19:46:19.907 回答
19

使用readOnly:true是正确的。但是，如果您仍想关注此文本字段，您可以按照以下代码进行操作：

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

如果要隐藏文本指针（光标），则需要设置enableInteractiveSelection为false.

于 2020-11-26T07:54:08.553 回答
13

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

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

将enableInteractiveSelection设置为true，它将允许onTap()正常运行。

于 2020-07-30T07:55:55.573 回答
12

现在有一种方法可以禁用TextField和TextFormField。在这里查看 github 。像这样使用它：

TextField(enabled: false)
于 2019-03-12T13:12:29.160 回答
10

我尝试使用 FocuseNode(), enabled = false 但无法正常工作，而不是使用名为AbsorbPointer的小部件。它用于防止小部件触摸或点击，我将我的 TextFormField 或其他小部件包装在 AbsordPointer 小部件中并提供一个参数以禁用触摸

例子

AbsorbPointer(
      absorbing: true,  //To disable from touch use false while **true** for otherwise
      child: Your WidgetsName
);
于 2019-09-04T16:40:34.237 回答
9

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

TextFormField(
    enabled: false,
)
于 2021-06-01T07:18:46.120 回答
1

采用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)),
  ),
于 2020-07-28T09:04:23.177 回答
0

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

FocusScope.of(context).requestFocus(titleFocusNode);
titleFocusNode.consumeKeyboardToken();
于 2021-12-06T11:31:07.580 回答
0

它对我有用

TextField(
          readOnly: true,
         onChanged: (value) { },
        )
于 2022-01-01T13:59:50.590 回答
0

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

TextField(
          readOnly: true,
          enabled: false,
        )

1- 如果您希望禁用 TextField 键入和编带集 [启用：false]

2- 如果您只想禁用TextField 输入集 [readOnly: true]

于 2022-02-10T17:09:29.323 回答