【发布时间】：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（堆栈的第一个元素，在屏幕顶部）可以点击，没有当点击屏幕中心的那个（堆栈的第二个元素，由于翻译而位于那里）时发生。
【问题讨论】：
标签： flutter flutter-layout flutter-widget