主题
TextField 点击空白处丢失焦点
dart
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title:const Text('Lost Focus on Blank Click'),
),
body: GestureDetector(
onTap: () {
// 在点击空白处时移除焦点
FocusScope.of(context).unfocus();
},
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
MyTextField(
hintText: 'Enter username',
icon: Icons.person,
),
SizedBox(height: 20),
MyTextField(
hintText: 'Enter password',
icon: Icons.lock,
obscureText: true,
),
],
),
),
),
),
);
}
}
class MyTextField extends StatelessWidget {
final String hintText;
final IconData icon;
final bool obscureText;
const MyTextField({
Key? key,
required this.hintText,
required this.icon,
this.obscureText = false,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
width: 250,
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(25),
),
child: TextField(
obscureText: obscureText,
style: TextStyle(fontSize: 16),
decoration: InputDecoration(
border: InputBorder.none,
hintText: hintText,
hintStyle: TextStyle(color: Colors.grey),
prefixIcon: Icon(icon, color: Colors.grey),
),
),
);
}
}