Question

这使我感到非常困惑，因为仅将TextField包裹在SizedBox中，效果很好；但是当我将同一段代码包装在Transform.translate小部件中时，它看起来像是一张简单的图像（无法轻敲，也无法聚焦）。另外，如果我将Transform.translate更改为Positioned小部件，则TextField可以正常工作，但是我想了解为什么会这样，因为对于这个特殊项目，我需要在Transpositioned上使用Transform.translate。

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（Stack的第一个元素，在屏幕顶部）显示，什么都没有点击屏幕中央的一个（堆栈的第二个元素，由于翻译而位于此处）会发生这种情况。

Answer 1

尝试调试，并使用Flutter检查器查看布局网格线和更正窗口小部件的边界。那应该给您一个更好的主意，为什么会这样。好像当您使用“变换”窗口小部件时，它不会注册点击，因为它仅移动边界而不是移动拍打区域。尝试用GestureDetector包装Transform小部件，然后看看。您还可以在GitHub上关注类似的问题： https://github.com/flutter/flutter/issues/27587

单击时，包装在Transform.translate中的TextField不会聚焦

1 个答案: