Question

我在Textformfield中添加了一个图标，是否有一种方法可以在禁用Textformfield时仍然单击后缀图标？

如果我启用该文本字段，则文本将可填充。

这是代码

TextFormField (
                     enabled: false,
                     decoration: InputDecoration (
                       filled: true,
                         prefixIcon: Icon (Icons.content_copy),
                         suffixIcon: IconButton (icon: Icon (
                           Icons.camera_alt,
                           color: Colors.orange,
                         ), onPressed: () {
                           print ("halooooooo");
                         }),
                         labelText: "Photo KTP *"),
                   )

Answer 1

否，您不能这样做，因为如果您检查TextFormField和TextField的源代码，则它使用的是基于IgnorePointer属性的enabled小部件。

您可以使用Row小部件来实现相同目的，请检查以下代码：

Row(
              children: [
                Expanded(
                  child: TextFormField(
                    enabled: false,
                    decoration: InputDecoration(
                        filled: true,
                        prefixIcon: Icon(Icons.content_copy),
                        labelText: "Photo KTP *"),
                  ),
                ),
                IconButton(
                    icon: Icon(
                      Icons.camera_alt,
                      color: Colors.orange,
                    ),
                    onPressed: () {
                      print("halooooooo");
                    }),
              ],
            )

Answer 2

我在这里找到了解决方法：

只需添加readOnly : true

TextFormField(
                    readOnly: true,
                    decoration: InputDecoration(
                        prefixIcon: Icon(Icons.content_copy),
                        suffixIcon: IconButton(icon: Icon(
                          Icons.camera_alt,
                          color: Colors.orange,
                        ), onPressed: (){
                          print("halooooooo");
                        }),
                        labelText: "Foto KTP *"),
                  )

Answer 3

将TextFormField替换为此

  Stack(
    children: <Widget>[
      TextFormField(
        enabled: false,
        focusNode: FocusNode(),
        decoration: InputDecoration(
            filled: true,
            prefixIcon: Icon(Icons.content_copy),
            labelText: "Photo KTP *"),
      ),
      Positioned(
        top: 10,
        bottom: 10,
        right: 10,
        child: IconButton(
          icon: Icon(
            Icons.camera_alt,
            color: Colors.orange,
          ),
          onPressed: (){
            print('halloooo');
          },
        ),
      ),
    ],
  ),

您可以通过以下方式达到相同的效果。

这是怎么回事？

我正在使用Stack小部件。使用Stack，我们可以在同一空间中放置多个元素。然后，将相机按钮放到右侧。相机按钮将响应触摸。

编辑：

with read-only

您可以使按钮与read-only: true一起使用，但是输入仍将触发textedit动画。

使用堆栈时，输入被真正禁用。

with stack

TextformField可填充

3 个答案:

编辑：