在Flutter中禁用文本编辑字段 [英] Disable a text edit field in flutter

问题描述

我需要偶尔禁用TextFormField。我在窗口小部件或控制器中找不到标记，使其仅是只读或禁用。
最好的方法是什么？

解决方案

此功能目前不是由框架，但您可以使用

（具有只读值）

此处是启用后的样子。

（有焦点）

（无焦点）

此代码如下：

  import'package：flutter / material.dart'; 
 
 void main（）{
 runApp（new MaterialApp（
 home：new HomePage（），
））; 
} 
 
类HomePage扩展了StatefulWidget {
 HomePageState createState（）=>新的HomePageState（）; 
} 
 
类HomePageState扩展了State< HomePage> {
 
 TextEditingController _controller = new TextEditingController（）; 
 bool _enabled = false; 
 
 @override 
小部件构建（BuildContext上下文）{
 ThemeData theme = Theme.of（context）; 
返回新的Scaffold（
 appBar：新的AppBar（
标题：new Text（'Disabled Text'），
），
 floatActionButton：new FloatingActionButton（
孩子：new Icon（Icons.free_breakfast），
 onPressed：（）{
 setState（（）{
 _enabled =！_enabled; 
}）; 
} 
），
主体：new Center（
子代：new Container（
保证金：const EdgeInsets.all（10.0）），
子代：_enabled？
 new TextFormField（controller：_controller）：
 new FocusScope（
 node：new FocusScopeNode（），
 child：new TextFormField（
 controller：_controller，
 style：theme .textTheme.subhead.copyWith（
 color：theme.disabledColor，
），
装饰：new InputDecoration（
 hintText：_enabled？'Type something'：'You ca不关注我，
），
），
），
），
），
）； 
} 
} 
  

I need to disable TextFormField occasionally. I couldn't find a flag in the widget, or the controller to simply make it read only or disable. What is the best way to do it?

解决方案

This isn't a feature that is currently provided by the framework, but you can use a FocusScope to prevent a TextFormField from requesting focus.

Here's what it looks like when it's disabled.

(with hint text)

(with a readonly value)

Here's what it looks like when it's enabled.

(with focus)

(without focus)

Code for this is below:

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

这篇关于在Flutter中禁用文本编辑字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！