可填充的TextformField

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

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

只需添加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 2

不能，因为如果查看TextFormField和TextField的源代码，就会发现它使用的是基于enabled属性的IgnorePointer小部件。

您可以使用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 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一起工作，但是输入仍然会触发文本编辑动画。

使用stack时，输入是真正禁用的。

with stack