单击时包裹在 Transform.translate 中的 TextField 不聚焦

Posted 2023-02-23

【中文标题】单击时包裹在 Transform.translate 中的 TextField 不聚焦

【英文标题】：TextField wrapped in a Transform.translate does not focus when clicked

【发布时间】：2020-11-18 06:55:13

【问题描述】：

这让我很困惑，因为 TextField 仅包装在 SizedBox 中，效果很好；但是当我将同一段代码包装在 Transform.translate 小部件中时，它似乎是一个简单的图像（它不能被点击，也不能聚焦）。 此外，如果我将 Transform.translate 更改为 Positioned 小部件，TextField 可以完美运行，但我想了解为什么会发生这种情况，因为对于这个特殊项目，我需要使用 Transform.translate 而不是 Positioned。

class Login extends StatelessWidget 
  Login(
    Key key,
  ) : super(key: key);
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      backgroundColor: const Color(0xfff4f6fa),
      body: Stack(
        children: <Widget>[   
             SizedBox(
              width: 302.0,
              height: 60.0,
              child: TextField(
             decoration: InputDecoration(
               hintText: 'Correo electrónico *',
               prefixIcon: Icon(Icons.send),
               border: OutlineInputBorder(
                 borderSide:
                     BorderSide(width: 1.0, color: const Color(0xffe7e7e7)),
                 borderRadius: BorderRadius.circular(4.0),
               ),
             ),
             style: TextStyle(
               fontFamily: 'Nunito',
               fontSize: 14,
               color: const Color(0xff777777),
               height: 1.4285714285714286,
             ),
             textAlign: TextAlign.left,
             onChanged: (String value) async 
               
             ,
             onSubmitted: (String value) async 
               
             ,
              ),
            ),
          // Positioned(
          Transform.translate(
            offset: Offset(36.0, 317.8),
            // left: 36,
            // top: 317.8,
            child:
                // Adobe XD layer: 'input:mail' (component)
                SizedBox(
              width: 302.0,
              height: 60.0,
              
              child: TextField(
                decoration: InputDecoration(
                  hintText: 'Correo electrónico *',
                  prefixIcon: Icon(Icons.send),
                  border: OutlineInputBorder(
                    borderSide:
                        BorderSide(width: 1.0, color: const Color(0xffe7e7e7)),
                    borderRadius: BorderRadius.circular(4.0),
                  ),
                ),
                style: TextStyle(
                  fontFamily: 'Nunito',
                  fontSize: 14,
                  color: const Color(0xff777777),
                  height: 1.4285714285714286,
                ),
                textAlign: TextAlign.left,
                onChanged: (String value) async 
                  
                ,
                onSubmitted: (String value) async 
                  
                ,
              ),
            ),
          ),
          
        ],
      ),
    );
  

如前所述，两个输入都显示在屏幕上（一个在中心，一个在顶部），只有用 SizeBox 包裹的 TextField（堆栈的第一个元素，在屏幕顶部）可以点击，没有当点击屏幕中心的那个（堆栈的第二个元素，由于翻译而位于那里）时发生。

【参考方案1】：

尝试使用 Flutter 检查器调试并查看布局网格线和正确的小部件边界。 这应该让您更好地了解它为什么会这样。 似乎当您使用“变换”小部件时，它不会记录命中，因为它只是移动边界而不是点击区域。 尝试用 GestureDetector 包装 Transform 小部件并查看。 您也可以在 GitHub 上关注类似的问题： https://github.com/flutter/flutter/issues/27587

【讨论】：

如果我点击小部件最初放置的区域（在屏幕的左上角，在执行翻译之前），TextField 仍然没有“激活”、“聚焦”或“准备好”接收输入'。所以我认为这个问题与你所指的问题本质上不同。

这很奇怪，只是为了用Textformfield替换TextField，有点相同但只是尝试