在flutter中禁用文本编辑字段

Question

我偶尔需要禁用TextFormField.我无法在小部件中找到标志,或者控制器只是将其设为只读或禁用.最好的方法是什么？

Answer 1

还有另一种方法可以实现,这也不会导致这个问题.希望这可以帮助某人.

创建AlwaysDisabledFocusNode并将其传递给a的focusNode属性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, 
    ...
    ...
)

注意:这也将禁用与文本输入关联的图标.

Answer 2

TextField并且TextFormField都有所谓的争论enabled.您可以使用布尔变量来控制它.enabled=true意味着它将充当编辑文本字段,而enabled=false将禁用TextField.

Answer 3

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

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

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

Answer 4

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

TextField(
          readOnly: true,
          enabled: false,
        )

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

2-如果您只想禁用TextField 键入设置 [readOnly: true]

Answer 5

类似于html中的readonly

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

这可以响应onTap。

类似于html中的禁用

TextField(
    enable: false
)

这无法响应onTap。

Answer 6

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

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

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

Answer 7

这不是框架当前提供的功能,但您可以使用a 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 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

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

TextFormField(
    enabled: false,
)

Answer 10

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,
      ),
    );

Answer 11

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

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

• enableInteractiveSelection

  将禁用以下内容的选择 TextField
  
  

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

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

使用这种方式，您仍然可以触摸TextField但无法输入或选择其内容。相信我，有时候它会很有用（datepicker，timepicker等）：）

Answer 12

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

TextField(enabled: false)

Answer 13

TextFormField(
readOnly: true,
)